Add prop in vue.config.js to change vue src directory (copy)

[cthames]

What problem does this feature solve?

I apologize. The previous issue had comments disabled as I was in the middle of responding to the comments by @sodatea and @yyx990803 . There is confusion that I'm trying to address. I'm talking about existing projects see my comment below. I think it's in the best interest and for increased adoption of Vue JS that a thorough discussion from both sides is had instead of ending it prematurely before I even had a chance to respond. I understand wanting to limit for new projects, but existing projects is where greater adoption for Vue JS is. It will also allow for existing projects to transition from another front end to Vue JS slowly without having to re-write an entire app. Businesses aren't going to spend a bunch of money upfront to rewrite an entire app. A slow transition is more feasible. See my comment below...

Feature

Having the Vue src files and directories in the /src directory works for simple projects, but for more complex projects it doesn't work as well. If you're including the Vuejs project in with another project with other programming languages that follow a different or same src dir causes problems. This feature will separate the vue code from the other project code (js/PHP/C#/Go/python/etc.)

Currently if you want to modify the vue src directory you need to modify vue.config.js:

1. change the alias @ path.

configureWebpack: {
        resolve: {
            alias: {
            '@': path.join(__dirname, vueSrc)
            }
        }
    }

2. Use the pages option to change their path:

pages: {
        app_main: {
            entry: path.join(vueSrc, 'main.ts'),
            template: path.join(vueSrc, 'public/index.html'),
            filename: 'index.html',
            title: 'Index'
        }
}

There might be other locations or properties that need to be updated with the change in src directory, but these 2 are the ones I've noticed so far.

There is the public directory that should also be considered. I assume it would also be moved into the specified Vue src directory or made into a separate web.config.js option.

If this is already doable without all the customization mentioned above, let me know.

What does the proposed API look like?

1. Add an option to vue.config.js called src or vueSrc or vueDir or srcDir or vueSrcDir or whatever is deemed appropriate.
2. Either assume the public folder is also in the new vueSrc path or create a separate publicSrc (or publicDir) option in vue.config.js.

The value would be starting the current directory so you don't need to include the whole path.

Example: if you wanted to change the src vue directory and files from src to webclient/vue.

Note: The developer would manually create the new webclient directory in the project root. Then rename the src directory to vue and move it into the webclient folder. The public directory would also be moved into webclient/vue.

vue.config.js

module.exports = {
    vueSrcDir: 'webclient/vue', // Default: /src
    publicDir: 'webclient/vue' // Default: /public
}

This is NOT something that would make cli-service / webpack move the files automatically.

The vue-cli would then change the vue src path where used by the cli-service.

The 3 places I've seen so far are:

1. resolve: { alias: { '@': pathToVueSrc } }
2. pages / entry / template
3. The public directory would also be located in the pathToVueSrc or another vue.config.js option.

Thanks!
Keep up the good work!

[cthames]

@sam3d I think people should change the directory only after having fully understood what he/she's doing.

@sodatea In regards to your comment. That is why there are defaults and the options only need to be mentioned in the docs. The applicability is for existing and complex apps. As well as, existing projects migrating from another front end framework to VueJS.

As @sam3d mentioned there are no cons that I can think of or mentioned by @sodatea or @LinusBorg and is no different than the outputDir and assetsDir options.

I've currently run into this situation with all of the existing apps where I was adding VueJS or upgrading VueJS. If later on you add another feature that requires the src path, then everyone will need to change it. It's better to have it in one place.

Code wise, having it one variable to make these changes is beneficial to all, including to additional.

Note: As I was commenting to sodatea, yyx990803 added a comment... Here is my response..

@yyx990803 In regards to your comment, I believe greater adoption will happen with VueJS if it wasn't so constrained and hard coded in the src directory (and also public directory).

I disagree with your first point.

1. The CLI is designed for SPAs or projects that separates front-end from the backend (only communicating via API calls). You can place the Vue CLI project directory anywhere you want - but it should be separate from other code in your entire project. It's not recommended to mix server-side code inside a Vue CLI project root.

Most businesses are not going to start new and re-program all their logic. Nor do only a SPA. Existing projects may already have the src and it's being used by another programming language. Also, the majority of projects are going to have a mix of server-side and VueJS code. This is because they probably already have SSR in another language already built and not with VueJS. This would also allow the business/project to be in a transition state. If they had it this way it may allow them to slowly transition to be only Vue JS.

I would like to point out to point 3.

3. We want to encourage a somewhat consistent source code structure across all Vue CLI projects so that users have an easier time jumping into a new project.

The defaults will exist no issues with keeping it consistent with new projects. No con here.

Point 3 also seems to indicate a complete disregard and understanding to existing projects. No business is going to rebuild an existing project to fit Vue JS's structure. If you allow it to easily be customized it will lead to greater adoption as well as greater chances of keeping Vue JS up to date with the newest version. A fragmented ecosystem is not in the best interest for Vue JS.

I lastly respectfully disagree with your point 4.

4. There is a maintenance cost in every feature added. As explained above, we'd rather spend time on features that bring more substantial improvements.

This option(s) easily allow for these changes as well as make it easier for any additional changes to the vue-cli that may require this path. It is set in one place and not hard coded to src. Seems like a no brainer to me, but then I haven't looked at the Vue CLI source code.

BTW @yyx990803 and team keep up the good work with Vue!

[LinusBorg]

Why the duplicate?