Config source dir

[ieshan]

What problem does this feature solve?

There should be option in vue.config.js to change the 'src' dir to something else.

What does the proposed API look like?

module.exports = {
sourceDir: "client"
};

[Pymous]

You can, just create a vue.config.js file, and configure it like that :

  lintOnSave: true,
  configureWebpack: {
    output: {
      path: __dirname + '/dist/client'
    },
    resolve: {
      alias: {
        '@': __dirname + '/src/client'
      }
    },
    entry: {
      app: './src/client/main.js'
    }
  }
}```

[cj]

@Pymous I agree with @ieshan, it would be nice just to set the sourceDir, or how poi does it by just specifying the entry file https://poi.js.org/options.html#entry

[Pymous]

It is possible, look at the snippet 😀

But I agree that it could be made more clear somewhere in the doc !

[cj]

@Pymous I know it's possible using vue.config.js, I just think it should be made an option as other cli's like nuxt, poi etc... do 😄

[cj]

@Pymous you also have to add these to your config https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-eslint/index.js#L9 https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-typescript/lib/tslint.js#L78 https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-typescript/index.js#L23. So it's not just as simple as your snippet above. Making these use a variable and allowing you to just set sourceDir would be a nice addition IMO.

[yyx990803]

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.

[azjezz]

i had the same problem, i'm only using vue for front-end with zend expressive ( php ) on the back end, all modern php projects use the src/ directory to point to the source directory and public/ to the public directory, so i was looking for a way to change to source directory to assets/ and the output directory to public/assets, i ended up using @Pymous method. but i think it would be better if vue had an option to change the source directory like @ieshan mentioned.

[brhx]

@yyx990803 I would like to kindly request that you reconsider your position.

One of the core tenants of Vue CLI 3 is that you can go an incredibly long way without having to eject.

Many people build Vue projects as subcomponents of other, larger projects. Usually these are servers of many different languages and frameworks; often at least partially responsible for serving the generated dist directory (something that you can configure, as there has been a clearly recognised need to change the output of build files).

The src directory may also be used by these frameworks and languages for different purposes. For any particular project, it may make sense that the client uses src for their serverside code, and wish to rename their src to client to better distinguish these, for example.

This lack of configurability feels weird and inconsistent. src works well as a default but it doesn't seem take into account the scope of which Vue projects often exist: not as standalone projects but as a smaller part of larger projects. Creating an entirely new subdirectory within an existing project for a Vue project and then also having an src and dist and new package.json and every other required file again is an unwieldy solution to these problems.

[onyijne]

@sam3d just spoke my mind, after going through several docs on the internet on how to rename src folder to client.
I use Onsen-UI, Vue with Yii framework and I have configured the project to share a single package.json file, (as I configured Yii to use npm for assets management instead of Yii's built-in assets management), but could not tell Vue where to get its source code from, @yyx990803 kindly reconsider your stand.

[brhx]

I've started work on a package that attempts to emulate the desired native behaviour as closely as possible.

$ vue add source-dir

// vue.config.js
module.exports = {
    pluginOptions: {
        sourceDir: "client"
    }
}

https://github.com/sam3d/vue-source-dir

This should be a first-class option though, and I would rather this was treated as a stopgap implementation as opposed to a long-term solution.

[douglasg14b]

Using a different directory name is only a matter of personal taste, so if you insist on changing that, you are on your own.

Isn't that literally the entire point of being able to configure via vue.config.js? Isn't the current default also a matter of personal taste, just that it is someone else's based on their common environment?

As an example, you don't want an awkward src directory at the root of an asp.net application, that's just bad form.

[AlexandreBonaventure]

@yyx990803
I know vue-cli is more leaning towards SPAs projects, but since vue-cli provides build with target lib, I would have expected it suited for library development as well.

For one of the library I am developing I was using poi, and I wanted to switch to 'vue-cli' to both build the library but serve and build the example pages for instance.

As a plugin developer for Vue, it makes sense for me to use vue-cli because it provides everything I need without the hassle of maintaining my package.json for serving, building, babel support, unit tests with babel support...
The lack of being able to use vue-cli-service with different configuration and choose the config src directory makes it almost unusable for this purpose (If you don't wanna spend much effort to do it manually)
Would you then recommend to always use poi in those circumstances ? Just curious about the whole scope of the service. Maybe it should be stated clearly in the documentation if so.
Thanks

[cawoodm]

Sorry to comment post-mortem but it seems relevant: Why does vue build only work when run from inside the src/ directory (i.e. you can't run it in the parent directory because it can't find a Valid entry file) and then create a dist/ subdirectory inside the src/ directory? There seems to be no way to get src/ and dist/ to be siblings...

[haoqunjiang]

@cawoodm vue build is not the same as npm run build.

[ansien]

Can this please be changed already? Every modern PHP framework already uses the src directory. Making it close to impossible to use vue-cli without jumping trough 20 hoops.

[Akryum]

@ansien12 Did you try creating the vue project in a subfolder or a sibling folder?

[blixxurd]

This needs to be added.

[gemurdock]

I want to put vue in a client directory, this whole thing makes me so sad. I love vue, but jeez this stinks big.

[dn-l]

If you want to rename src to client create a file vue.config.js:

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, 'client')
      }
    },
    entry: {
      app: path.join(__dirname, 'client', 'main.js')
    }
  }
}

[s-rd]

Like the others in this thread I really don't see why vue-cli shouldn't allow this, either. Having sensible defaults is nice, but not being able to configure it seems very unnecessary, and perhaps even a little out-of-character for Vue, being a less opinionated/coupled framework.

Like @douglasg14b mentioned,

Isn't [using a different directory name] literally the entire point of being able to configure via vue.config.js? Isn't the current default also a matter of personal taste, just that it is someone else's based on their common environment?

I hope you can reconsider this, Vue JS team :)

As an example, I like how Vue Styleguidist does this:

[haoqunjiang]

@semonje

but not being able to configure it seems very unnecessary

It's not "not being able to", it's just very inconvenient (as there were already workarounds posted in this thread) and if any gotchas encountered in that process it won't be our priority to fix these issues.

[s-rd]

@sodatea Sorry, let me rephrase, then :)

Not being able to configure it in a not very inconvenient way seems very unnecessary.

[SethEden]

I spent the last 3 weeks trying to do project setup on this very issue because:

1. I couldn't find it in any documentation!
2. I had to go through 3 different Electron-Vue-Plugin setup wire-frame templates, post questions on Stack-Overflow, join the Vue Facebook page, join the Vue Discord channel, watch over 30 YouTube video tutorials on Vue/Electron/Vuetify/VueBootStrap/VueQuasar before someone finally pointed me to a blog article that linked me back here.

I implemented the fix and I'm still having issues with the Vuetify background.js file. This really feels very hackish and unprofessional both in design & solution. Please re-consider (I beg you on behalf of the community, on behalf of clean code, on behalf of all that is good/green/and right in the world) providing a slightly more formal customization with maybe a single paragraph in the documentation. (So total N00Bs like me don't have to spend a month or more trying to figure out how to get the customization they want, I was nearly ready to give up all-together on Vue over this issue! Since I am still facing issues, it is still concerning to me!!) I think this would go a long way to encouraging enterprise scale adoption of Vue & Vuey frameworks!

When your users spend 3 years begging for a feature, might it be worth considering at least a slightly more formal solution? Just thinking about a professional reality check here, from one professional software developer to another. Thank you & Stay Safe!! :-D

[SethEden]

I should note that if you are building an Electron-Vue app then you will probably need to do this additional step....also not documented in any documentation file: https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/configuration.html#webpack-configuration

[s-rd]

For the record I also still stumble upon this issue every now and then, and find it equally strange now as half a year ago.

Like others have already requested, I think it'd make sense if the Vue JS team took another look at this.

[jbnv]

"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."

This is so endemic of the arrogance of people in the tech industry. Yes, using a different directory name is only a matter of personal taste. And that's exactly where the prerogative should lie. You can prefer all Vue CLI projects to have a consistent, standard directory structure all you want. Forcing it on the developer is just rude and a slap to the face of people who have chosen Vue when they could have gone elsewhere.

[haoqunjiang]

This is so endemic of the arrogance of people in the tech industry.

@jbnv You are the one being arrogant here.

Forcing it on the developer is just rude

It's never forced. It's just inconvenient to customize in Vue CLI and we won't provide first-class support for it. But it's customizable anyway.

Yes, using a different directory name is only a matter of personal taste.

You have no idea how much unnecessary burden these personal taste issues put on us.*

And you are the one who tries to force someone else to do your favor for the sake of your personal taste.

How dare you accuse us of arrogance?

---

* Initial implementation of such a feature already costs time, to keep fixing all the edge cases is so much more energy-consuming.

[Pymous]

@jbnv : I honestly don't see how that translate to any arrogance from the Vue Dev Team... we have an amazing tool, let's not pick on each other for options and opinions.

Maybe a middle ground can be found in the shape of a section in the doc ? To specify the tweaks needed to achieve the same result ?

[basickarl]

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.

The configuration is something developers change/use. It should be related to the source code, not the tooling. The project tooling configuration should be separate to the application configuration. It's crazy that this config is in root.

For others, we have done the following to fix this issue (in the scripts in package.json):

"development": "npm exec -- nodenv --env configs/.env.development --exec npm -- exec -- vue-cli-service serve",