Add non-SPA preset

[wujekbogdan]

What problem does this feature solve?

SPA is a hot topic nowadays, but Vue works great with non-SPA. Adding Vue components to existing sites is still a very common use case for Vue. I think that adding non-SPA support isn't a big deal.

What does the proposed API look like?

The minimal set of features to implement is:

• disable unique names for assets in dist (app.js would be always saved as app.js, instead of app.bad90def.js)
• add dev server proxy and make the non-SPA URL configurable.
• add mount point selection to the wizard (that would default to #app)

[diogosalazar]

Hi @wujekbogdan,

This is how I am getting static file names for my bundles:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    if( process.env.NODE_ENV === 'production' ) {
      // Make output CSS file names static
      const extractCSSPlugin = config.plugin('extract-css');
      extractCSSPlugin && extractCSSPlugin.tap(() => [{
        filename: '[name].css',
        chunkFilename: '[name].css'
      }]);
    }
  },
  configureWebpack: {
    // Make output JS file names static
    output: {
      filename: '[name].js',
      chunkFilename: '[name].js'
    }
  }
}

Hope this helps.

[wujekbogdan]

Hi @diogosalazar,

Thanks for the code snippet, but the purpose of this ticket is not to get help :) I know how to configure Webpack. The purpose of this task is to get this feature added to vue-cli. I've created this ticket because I've seen a lot of posts on the Vue forums created by people who are not too much familiar with Webpack, struggling with a non-SPA setup.

Here's a quote from the Introduction section of the Vue Guide:

The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

So even the documentation says that SPA is not the only (and not the main) Vue.js use case. So it would be great if vue-cli was not only SPA-oriented.

[diogosalazar]

Hi @wujekbogdan, thanks for clarifying.

I would agree that the options provided out-of-the-box seem to be mostly SPA oriented.

As someone who works primarily with legacy projects running on Java/PHP backends the SPA scenario doesn't do it for me either -- and I constantly find myself having to reconfigure vue/webpack projects/boilerplates to generate static assets, loaded by dynamically generated pages (no index.html needed) and mounted to multiple elements on those pages.

Since I am not part of the core Vue team (just another user of the framework) I'd have to defer to someone else.

[haoqunjiang]

I think it has been done with the pages option introduced in 3.0.0-beta.12