CODEWITHSUNDEEP
vue.jswebpackbuild
Keanu Hie
Keanu Hie

Reputation: 307

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

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.

Upvotes: 6

Views: 16727

Answers (7)

Zack Plauché
Zack Plauché

Reputation: 4210

September 2022 Update

Use create-vue.

npm init vue@latest project-name

or in your current directory

npm init vue@latest .

Upvotes: -3

JasonTrue
JasonTrue

Reputation: 19609

You don't need any build tools at all if you're willing to work within the limitations of browser-supported JavaScript. The onboarding guide doesn't use vue-cli, webpack or even Node at all.

My first nontrivial Vue app did use webpack, but not vue-cli. It was hand-configured based on advice from a then-current how-to.

Vue-cli is convenient to get a build process up and running quickly, but it's optimized for people who are either very comfortable with node build tools, or don't want to mess with the defaults very much.

Upvotes: 2

Martin Czerwinski
Martin Czerwinski

Reputation: 11

Yes. You can add Vue functionality to existing project without Vue CLI. Preferably a project using Webpack as bundler...then it is pretty simple.

You need 3 packages: vue@next, @vue/compiler-sfc and vue-loader and add some rule configuration in your webpack.config.js file.

Note! At writing moment you can not choose latest official vue-loader as it is still dependent on vue-template-compiler (used in Vue 2). You need to force in installation of v16+ (I use vue-loader 16.8.3) together with latest Vue v.3 (3.2.28)...

Here you can read detail description how do do it.

Upvotes: 1

schuyberg
schuyberg

Reputation: 73

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.

Upvotes: 4

Faruk Nasir
Faruk Nasir

Reputation: 212

Yes it is very possible...in fact, until recently, a lot of projects were built without that!

Upvotes: 1

Decade Moon
Decade Moon

Reputation: 34286

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

Upvotes: 5

RomainV
RomainV

Reputation: 293

yes vue-cli include webpack to build assets. Now, vue.js does the same things. https://github.com/vuejs/vue/blob/dev/package.json here is the package.json of Vue.js and you can see webpack is required.

So by default webpack is included into Vue.js

Upvotes: -1

Related Questions