Is it possible to build a vue application without vue-cli?

Question

Like the titles says for itself. Is it possible to build a vue application with the help of webpack and without the vue cli? If not, why? For my understanding vue-cli uses also webpack to build their files.

Answer 1

Yes, of course.

vue-cli uses webpack under-the-hood, but it abstracts away all the tedious webpack configuration with a sensible default so you can focus on just writing your application.

If you need to alter the way your application is built, for example you want to compress image assets, then unless vue-cli provides a config option for your specific need then you will have to alter the webpack configuration in some way (e.g. adding a new loader or altering the configuration of an existing loader, etc). vue-cli does expose some ways to do this, but you don't have full control over the webpack build from the beginning.

I usually have very specific requirements for how I want my web apps to be built, so I opt for the DIY webpack solution so that I have full control over all aspects of the build.

If you don't want to use vue-cli but still want to use webpack, then at minimum I would suggest the following packages:

• webpack
• vue
• vue-loader for compiling and bundling .vue single file components
• babel-loader for transpiling JavaScript
• file-loader for image assets
• style-loader for injecting styles into the DOM at runtime
• css-loader for loading modules referenced in CSS files like images and fonts

Answer 2

I'm using Vue 3 without the Vue CLI in an existing application that has a custom Webpack configuration, and the following steps worked for me:

Install Vue3:

npm install --save vue@next

Install vue-loader (v16 or newer) and the new template compiler:

npm install --save-dev vue-loader@^16 @vue/compiler-sfc

Webpack Config:

const { VueLoaderPlugin } = require('vue-loader'); // load plugin

//...

module: {
  rules: [
    {
        test: /\.vue$/,
        exclude: /(node_modules)/,
        use: [
          { loader: 'vue-loader' }
        ]
      }
  ]
},

plugins: [
  new VueLoaderPlugin()
]

Thanks to Webpack for Vue 3 for the tip on installing the compiler without the CLI; I couldn't find that in the Vue 3 documentation.