We Keep Coding

What's the proper location to store images in VueJS - public folder or assets folder?

I have been using Vue for a while now, and I noticed that I can store project images in either the assets folder or the public folder.
To access images from assets folder in Vue, one would do :src="require('#/assets/images/myimage.jpg')"
To access images from public folder in Vue, one would do :src="./static/images/myimage.jpg"
What's the proper location to store Vue project images?
What's the implication of using either?
How do they affect my project?

Based on the official vue documentation everything that is within the assets folder will be handled by Webpack while everything in the public folder is simply copied but doesn't go through Webpack: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
So if you want to take advantage of Webpacks optimization features during build (which you most certainly want) put them in assets.
I also put all my img's in the assets folder and only have the pwa related images and icons within the public folder.

All Stuff in the public folder gets straight up copied to your /dist usually. ex: favicon.ico ends up on your /dist folder with the name... favicon.ico.
The assets folder is usually where you would put your images/videos/fonts/svgs etc that you will import within vue files. These files end up on your /dist folder as a file with a hash name: (ex: 5j2i35j2o251hia.png).
Any assets from the /assets folder that you do not explicitly import will not end up in your /dist folder, as to not bloat your final file size.
Hope this helps..

https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Different between both would be relative (eventually as require('image')) vs absolute paths. Usually absolute path will not be passed via webpack during the build. And if you optimize images of absolute path, nothing will happen.

change absolute path to relative using gulp

In my gulp workflow I have a task that uses npm browser-sync module to serve static files. One of the options of this module is able to set a base directory to let me call js/css/img files etc, and include it using an absolute path like this:
<img src="/imgs/label.png">
this feature let me call this file from any subdirectory I want
/public
---/imgs
------label.png
---/catalog
------list.html <--- here
---index.html <--- and here, this image called using the same path /imgs/label.png
this works fine. Otherwise, I have a task that builds the final compressed and minified version of static files. The problem is, that when gulp building a dist folder with that files that located in the public folder, in html files, there's still absolute path in attributes like href/src. I need to convert the absolute path into relative with keeping a folder structure. I mean that in index.html src has to be imgs/label.png, and in catalog/list.html the same src attribute has to be ../imgs/label.png. Question: is there any module that able to do this for me, or maybe there's some another way to do that, instead of replacing the paths with own hands? Any advice would be appreciated.

access to external resources in the vert.x project

I have a project in vert.x 3.4.1 that I compile in .jar and I want to access from that .jar to an image in the same path:
-- myProject
-------- project.jar
-------- config.json
-------- logo.png
in my project.jar i have some html pages, from this pages I want to access to logo.png, I don't wanna to set it into .jar
I tried to set a route special for that but not works

If you use a StaticHandler, by default it looks for files in a webroot directory. Change your directory structure to:
myProject/
project.jar
config.json
webroot/
logo.png
Otherwise you can setup the static handler to something other than the default web root.

Ember build output (dist folder)

In Ember JS project, we have package.json (for NPM managed) and bower.json (Bower managed) where we have all our dependencies/devDependencies (e.g. bootstrap, jquery, ember, etc)
Now these get downloaded from their respective registries and get downloaded locally into node_modules/bower_components folder.
Now my question is while these folders (node_modules/bower_components) contain a lot of code dependencies, when we do a build, I see some code in the "dist" folder.
I want to understand what actually goes into this dist ?
I see things like vendor.css, vendor.js, myappName.css, myappName.js, etc
So how do these get constructed and what code actually goes inside these ?
Is it also base on what we have in our package/bower json config files ?
Or is it based on what we have in ember-cli-build.js ?

What is put under /dist should be everything you need to publish your application. Components from bower_components are typically loaded via app.import() in ember-cli-build.js and stuff from node_modules by addons you've installed (which ember-cli picks up automatically).
Here is a quick rundown of the files.
index.html --> Generated by ember-cli upon project creation
* --> Everything from /public
assets/
appName.css --> All css from under /app
appName.js --> All js and compiled templates from /app
vendor.css --> Any css imported from bower_components/node_modules (via ember-cli-build.js)
vendor.js --> Any js imported from bower_components/node_modules (via ember-cli-build.js)
test-*.js --> Test loader/support for ember-cli if you've run "ember test"
Most files also come with sourcemaps as .map which you can exclude when publishing the site.

As you said, the dependencies you declare in your bower.json and package.json get downloaded to bower_components and node_modules
When you do you an ember build command what happens is that all the code you decide to import in your ember-cli-build.js will get dumped to the vendor.js / vendor.css file. All your application code (templates/routes/components/controllers/services) will be placed in my-app-name.js. All your application styles will go to the my-app-name.css file. All these files will be placed in the dist directory so that you can deploy it.
See this sample ember-cli-build.js file:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
//CSS - Content of these files will go to "vendor.css"
app.import('vendor/css/bootstrap.css');
app.import('bower_components/datatables/media/css/jquery.dataTables.css');
app.import('bower_components/datatables/media/css/dataTables.bootstrap.css');
app.import('vendor/css/plugins/toastr/toastr.min.css');
// Javascript - Content of these files will go to "vendor.js"
app.import('vendor/js/bootstrap.js');
app.import('vendor/js/plugins/metisMenu/jquery.metisMenu.js');
app.import('vendor/js/plugins/toastr/toastr.min.js');
app.import('bower_components/datatables/media/js/jquery.dataTables.js');
return app.toTree();
};
The CSS imports will go to the vendor.css file and the JS imports will go to the vendor.js files.
The content of your my-app-name.css comes from the app/styles folder.
If you do ember build --environment production the ember build process will also fingertring your assets (append a hash at the end of the filename and generate an appropriate reference in the index.html file).

How do I configure Brunch.io to copy the index.js file from app/ to public/

Brunch is currently building my app and combining the css/js from the app and /app/assets folder but it doesn't copy the index.js file from the root of the app folder.
This is the index file which should become index.html inside the public folder.
I cannot work out how to config Brunch to do this. Any ideas?
Current Config: http://jsbin.com/lakapaxalamo/1
Folder Structure:

Your index.html should be inside app/assets

You can use this plugin, which will also optimize your HTML output: https://www.npmjs.com/package/html-pages-brunch