Renaming src Folder of a Vue CLI 3 Project

Renaming src Folder of a Vue CLI 3 Project

In this article, you'll learn how to rename the src folder that comes with any newly created Vue.js application.

In this article, you'll learn how to rename the src folder that comes with any newly created Vue.js application.

The challenge of designing a good CLI tool is to balance sensible defaults with the freedom to customize.

One of the best CLI tools I know of is Vue CLI 3. One of its "sensible defaults" is that the source files, e.g. uncompiled components and JavaScript files, will be in a directory src.

But what if you have your own unique app structures you want to use like MVC, or perhaps your own convention you use across all your code bases, so you'd prefer to give the source folder a different name like view, app, client etc.

In this GitHub issue, a user asked how src can be renamed to something else.

The answer is that this is not something that can be done directly. As Evan said in his closing comment in the issue:

*"There will not be a first-class option for this because we prefer all Vue CLI projects to have a consistent, standard directory structure. Using a different directory name is only a matter of personal taste, so if you insist on changing that, you are on your own."*

Let sleeping dogs lie?

So why mess with this? It's just a folder name, does it matter?

This was the question I had to ask myself when drafting my Enterprise Vue course, which is centered around creating a full-stack Vue/Express app including Vue CLI 3. This app is structured such that it includes server/API files in a subfolder of the scaffold.

As a staunch individualist and a hopeless perfectionist, I found I just couldn't leave the client source files in the generically named src folder while the server source files were in the more descriptively named server folder.

Changing the name of src can be done if you really believe the integrity of your folder structure is worth the difficulty it incurs which I'll explain below.

Webpack config

The main issue you'll butt up against is that the Webpack config under the hood of Vue CLI 3 has hardcoded src as the name of the source directory.

Webpack config is opaque in Vue CLI 3 by design, but if you do need to see it, you can use the inspect command.

My tip is to write it to a file and search for usages of src.

$ vue inspect > webpack.txt

In a typical Vue CLI installation, you'll see two instances of src, one in the alias section, and one in the entry file.

webpack.txt

{
...
  resolve: {
    alias: {
      '@': '/home/vagrant/app/src',
      ...
    },
    ...
  },
  ...
  entry: {
    app: [
      './src/main.js'
    ]
  }
}

To change these, you'll need to create or add to the Vue config file and override this Webpack config. I like using the Webpack Chain method to do this declaratively.

vue-js javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

In this article we will discuss full details and comparison of both Ember.js and Vue.js

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.