I'm doing some research for an article I'm writing about building VueJS libraries. Creating a default VueJS application with Vite creates a public directory in the root directory--which includes a vite.svg file. And it creates an assets directory under the src, which contains a vue.svg file. Both are referenced in the main App.vue.

The directory structure looks like this:

And you can see both files in there.

When I was at work, I saw this and didn't think much about it. But, writing an article, I wanted to better understand why there were two separate directories for what seemed like the exact same thing.

Off to the Internet I went. Eventually, I found this page in the Vue docs.

The public folder is for files that are copied, verbatim, in the build. They are accessible via the root directory, but not processed in any way. Examples of this might be a robots.txt file, or universal image.

Files in the assets directory, on the other hand, will be processed by the Vite build scripts. It is expected that these files will be imported, and used, by application components.

I do not understand why the vue.svg is put in the assets folder instead of the public folder for this template, though. Based on my current understanding, it seems it would be better off in public.

I hope this helped someone.

This entry was posted on June 17, 2025 at 9:00 AM

posted by Jeffry Houser in Vite, Professional
| 0 Comments Bookmark and Share