Installation of VueJS

Aman Chourasiya
Last Updated: May 13, 2022

Introduction

Vue.js was created with the intention of being adopted gradually. This means that, depending on the requirements, it can be integrated into a project in a variety of ways.

 

There are four main approaches to include Vue.js into a project:

  1. Import it as a CDN package.
  2. Download and host the JavaScript scripts on your server.
  3. Install it using npm.
  4. To scaffold a project, use the official CLI, which includes batteries-included build configurations for a modern front-end workflow (e.g., hot-reload, lint-on-save, and much more)

CDN

You can use the newest version, for prototyping or learning purposes, by including this script tag:

<script src="https://unpkg.com/vue@next"></script>

We propose linking to a specific version number and building for production to minimize unexpected breakage from subsequent versions.

Download and Self Host

You can download the relevant.js file and host it on your own web server if you don't want to utilize build tools but can't use a CDN in production. Then, exactly like with the CDN approach, you can include it with a <script> tag.

You should generally download both a development and a production build.

npm

When developing large-scale apps using Vue, npm is the recommended installation technique. It works well with module bundlers like webpack or Rollup.

 

Run this command to integrate Vue using npm -

# latest stable.
$ npm install vue@next

 

Vue also includes tools to help you create Single File Components (SFCs). You'll also need to install @vue/compiler-sfc, if you want to use SFCs.

$ npm install -D @vue/compiler-sfc

 

Note that @vue/compiler-sfc replaces vue-template-compiler if you're coming from Vue 2.

You'll also need an appropriate SFC loader or plugin for your preferred bundler in addition to @vue/compiler-sfc. For more details, read the SFC documentation.

Vue CLI is the preferred method for creating a webpack build with minimal configurations in most circumstances.

CLI

For rapidly scaffolding ambitious Single Page Applications, Vue provides an official CLI. It comes with built-in batteries for a modern front-end workflow. With hot-reload, lint-on-save, and various other production-ready builds, you can be up and operating in minutes.

Vue CLI v4.5, accessible on npm as @vue/cli, is recommended for Vue 3. You need to reinstall the newest version of @vue/cli globally to upgrade:

yarn global add @vue/cli
# OR
npm install -g @vue/cli

 

Then in the Vue projects, run -

vue upgrade --next

 

Vite

Vite is a web development build tool that enables lightning-fast code serving thanks to its native ES Module import technique.

Run the following instructions in your terminal to quickly start up Vue projects with Vite.

 

Using npm 6.x:

# npm 6.x.
$ npm init vite@latest <project-name> --template vue

 

Using npm 7+:

# npm 7+, extra double-dash is needed:.
$ npm init vite@latest <project-name> -- --template vue

 

Then run the following commands to complete the integration -

$ cd <project-name>
$ npm install
$ npm run dev

 

Or with Yarn:

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev

 

Explanation of Different Builds

Many alternative builds of Vue.js can be found in the dist/ directory of the npm package. Here's a rundown of which dist file should be utilized for which use case.

From CDN or without a Bundler

vue(.runtime).global(.prod).js:

  1. The Vue global is exposed for direct use via script src="..."> in the browser.
  2. In-browser template compilation:
    1. vue.global.js is the "complete" build, including the compiler and the runtime, allowing for an on-the-fly compilation of templates.
    2. Only the runtime is contained in vue.runtime.global.js, and templates must be pre-compiled during a build phase.
  3. All Vue core internal packages are inlined in this file, which means it's a single file with no dependencies on other files. To ensure that you get the same instance of code, you must import everything from only this file.
  4. The prod build is pre-minified, and there are hard-coded prod/dev branches. For production, use the *.prod.js files.

 

vue(.runtime).esm-browser(.prod).js:

  1. For use with native ES module imports (<script type="module"> in the browser).
  2. The global build uses the same runtime compilation, dependency inlining, and hard-coded prod/dev behavior.

With a Bundler

vue(.runtime).esm-bundler.js:

  1. For use with webpack, rollup, and parcel bundlers.
  2. Leaves process.env.NODE ENV guards on prod/dev branches (must be replaced by bundler)
  3. Builds that have been minified are not shipped (to be done together with the rest of the code after bundling)
  4. Dependencies (such as @vue/runtime-core and @vue/runtime-compiler) are imported.
    1. Imported dependencies are also esm-bundler builds, which means they will import their dependencies (for example, @vue/runtime-core imports @vue/reactivity).
    2. This implies you can install/import these dependencies one at a time without having multiple copies of them, but you must make sure they all resolve to the same version.
  5. In browser template compilation:
    1. vue.runtime.esm-bundler.js (default) is runtime-only and needs all templates to be pre-compiled. 
    2. Because bundler templates are often pre-compiled (e.g., in *.vue files), this is the default entry for bundlers (through module field in package.json).
    3. The runtime compiler is included in vue.esm-bundler.js. If you're using a bundler but still want to compile templates at runtime, use this (e.g., in-DOM templates or templates via inline JavaScript strings). You'll need to set up your bundler such that vue is aliased to this file.

 

For Server-Side Rendering

vue.cjs(.prod).js:

  1. For use in Node.js server-side rendering via require().
  2. This build will be loaded if you bundle your app with webpack with target:'node' and properly externalize vue.
  3. Although the dev/prod files are pre-built, the correct file is required, dependent on process.env.NODE_ENV.

Runtime + Compiler vs. Runtime-only

You'll need the compiler and hence the whole build if you need to compile templates on the client (for example, giving a string to the template option or mounting to an element using its in-DOM HTML as the template).

// this requires the compiler.
Vue.createApp({
  template: '<div>{{ hi }}</div>'
})

// this does not.
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})

Templates inside *.vue files are pre-compiled into JavaScript at build time when using vue-loader. Because the compiler isn't required in the final bundle, you can utilise the runtime-only build.

Frequently asked Questions

Q1. What is VUE JS used for?

Ans: VueJS is mainly used to create web interfaces and single-page apps. However, because of the HTML extensions and JS basis that operate in conjunction with an Electron framework, it can be used to construct both desktop and mobile apps, making it a popular frontend tool.
 

Q2. Is Vue easier than React?

Ans: In comparison to React, Vue is simpler to learn. Vue decouples HTML, CSS, and JavaScript in a style that web developers are already accustomed to. For developers who prefer to use JSX, it also allows them to do so.
 

Q3. Is React or Vue faster?

Ans: Vue is smaller and faster, resulting in improved performance. Both have advantages and disadvantages when it comes to hiring developers. Although Vue is easier to understand, React is more popular, making it easier to find employees.
 

Q4. Why is Vue so popular?

Ans: Basically, because Vue includes everything you need to make development go smoothly and quickly. The first key factor is its gentle learning curve. Vue is also small, light, versatile, modular, and powerful.

Key Takeaways

In this blog, we learned about the installation procedure of VueJS. We discussed different ways to include VueJS in our projects, including CDN, npm, among other ways. We also discussed ways to self-host the javascript files for reliability. We also learned how to integrate Vite with VueJS for a fast serving of code. The blog also explained different builds of VueJS and the difference between Runtime + Compiler vs. Runtime only.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think