Vue.js is built by design to be incrementally adoptable. This means that it can be integrated into a project multiple ways depending on the requirements.
There are four primary ways of adding Vue.js to a project:
Latest version:
Detailed release notes for each version are available on GitHub (opens new window).
Currently in Beta - Vuex and Router integration is still WIP
When using Vue, we recommend also installing the Vue Devtools (opens new window) in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface.
Get the Chrome Extension (opens new window)
Get the Firefox Addon (opens new window)
Get the standalone Electron app (opens new window)
For prototyping or learning purposes, you can use the latest version with:
<script src="https://unpkg.com/vue@next"></script>
For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions.
If you want to avoid using build tools but can't use a CDN in production then you can download the relevant .js
file and host it using your own web server. You can then include it using a <script>
tag, just like with the CDN approach.
The files can be browsed and downloaded from a CDN such as unpkg (opens new window) or jsDelivr (opens new window). The various different files are explained later but you would typically want to download both a development build and a production build.
npm is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as webpack (opens new window) or Rollup (opens new window).
# latest stable $ npm install vue@next
Vue also provides accompanying tools for authoring Single File Components (SFCs). If you want to use SFCs then you'll also need to install @vue/compiler-sfc
:
$ npm install -D @vue/compiler-sfc
If you're coming from Vue 2 then note that @vue/compiler-sfc
replaces vue-template-compiler
.
In addition to @vue/compiler-sfc
, you'll also need a suitable SFC loader or plugin for your chosen bundler. See the SFC documentation for more information.
In most cases, the preferred way to create a webpack build with minimal configuration is to use Vue CLI.
Vue provides an official CLI (opens new window) for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds.
The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through the guide without any build tools before using the CLI.
For Vue 3, you should use Vue CLI v4.5 available on npm
as @vue/cli
. To upgrade, you need to reinstall the latest version of @vue/cli
globally:
yarn global add @vue/cli # OR npm install -g @vue/cli
Then in the Vue projects, run
vue upgrade --next
Vite (opens new window) is a web development build tool that allows for lightning fast serving of code due to its native ES Module import approach.
Vue projects can quickly be set up with Vite by running the following commands in your terminal.
With npm:
# npm 6.x $ npm init vite@latest <project-name> --template vue # npm 7+, extra double-dash is needed: $ npm init vite@latest <project-name> -- --template vue $ cd <project-name> $ npm install $ npm run dev
Or with Yarn:
$ yarn create vite <project-name> --template vue $ cd <project-name> $ yarn $ yarn dev
Or with pnpm:
$ pnpm create vite <project-name> -- --template vue $ cd <project-name> $ pnpm install $ pnpm dev
In the dist/
directory of the npm package (opens new window) you will find many different builds of Vue.js. Here is an overview of which dist
file should be used depending on the use-case.
vue(.runtime).global(.prod).js
:<script src="...">
in the browser, exposes the Vue global.vue.global.js
is the "full" build that includes both the compiler and the runtime so it supports compiling templates on the fly.vue.runtime.global.js
contains only the runtime and requires templates to be pre-compiled during a build step.*.prod.js
files for production.Global builds are not UMD (opens new window) builds. They are built as IIFEs (opens new window) and are only meant for direct use via <script src="...">
.
vue(.runtime).esm-browser(.prod).js
:<script type="module">
).vue(.runtime).esm-bundler.js
:webpack
, rollup
and parcel
.process.env.NODE_ENV guards
(must be replaced by bundler)@vue/runtime-core
, @vue/runtime-compiler
) vue.runtime.esm-bundler.js
(default) is runtime only, and requires all templates to be pre-compiled. This is the default entry for bundlers (via module field in package.json
) because when using a bundler templates are typically pre-compiled (e.g. in *.vue
files).vue.esm-bundler.js
: includes the runtime compiler. Use this if you are using a bundler but still want runtime template compilation (e.g. in-DOM templates or templates via inline JavaScript strings). You will need to configure your bundler to alias vue to this file.vue.cjs(.prod).js
:require()
.target: 'node'
and properly externalize vue
, this is the build that will be loaded.process.env.NODE_ENV
.If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:
// this requires the compiler Vue.createApp({ template: '<div>{{ hi }}</div>' }) // this does not Vue.createApp({ render() { return Vue.h('div', {}, this.hi) } })
When using vue-loader
, templates inside *.vue
files are pre-compiled into JavaScript at build time. You don’t really need the compiler in the final bundle, and can therefore use the runtime-only build.
© 2013–present Yuxi Evan You
Licensed under the MIT License.
https://v3.vuejs.org/guide/installation.html