Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how to add the Vue.js framework to our app and build our first app.
Script Tag
We can include the Vue.js framework with a script tag.
To do this we can write:
<script src='https://vuejs.org/js/vue.js'></script>
before our app code loads. The URL above has the development version, which has all the warnings but it’s not minified.
To include the production version, we can write:
<script src='https://vuejs.org/js/vue.min.js'></script>
To fix the version to 2.6.11, we can write:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
We can also import the module in our browser if we don’t need to support Internet Explorer as follows:
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>
The vue.esm.browser.js file is already optimized for browsers so it can be used without creating too many requests.
Example
To create our first app, we can create the index.html file as follows:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<script src="https://vuejs.org/js/vue.js"></script>
</head> <body>
<div id="app"></div>
<script src="./src/index.js"></script>
</body>
</html>
Then in src/index.js , we can add:
new Vue({
template: "<div>{{ 'hello' }}</div>",
el: "#app"
});
Then we should see hello on the screen, since we have a div with the ID app , which is used by Vue.js to render our Vue instance.
The Vue.js compiler is responsible for converting the template into HTML.
In the template above, 'hello' is a JavaScript string, which was converted to HTML text when the Vue compiler runs.
We specified that the template has a div with the text 'hello' in it.
Different Builds of the Vue.js Framework
There are several different builds of the Vue.js framework. They’re:
- Full — Builds that have the compiler and the runtime. That’s the one we used in the example above.
- Compiler — Code that’s responsible for compiling template strings into JavaScript render functions
- Runtime — Code that’s responsible for creating Vue instances, rendering and updating virtual DOM, etc.
- UMD — A module that can be directly included with a
scripttag. It includes the runtime and the compiler - CommonJS — A module that can be used with older bundlers like Browserify or Webpack 1.
- ES Module — New to version 2.6. It can be used directly by browsers via
<script type='module'>or be used with bundlers like Webpack 2 or Rollup.
Runtime and Compiler
The runtime is used for creating the Vue instance via new Vue .
The compiler is for compiling templates specified by the template option.
This means that:
new Vue({
template: "<div>{{ 'hello' }}</div>",
el: "#app"
});
needs the compiler and:
new Vue({
el: "#app",
render(h) {
return h("div", "hello");
}
});
doesn’t.
Template syntax will be much more convenient when our apps get more complex.
When we’re using vue-loader or vueify , templates inside .vue files are precompiled into JavaScript, so we don’t need the compiler in the final bundle.
When we don’t need to use the compiler, then we should use the runtime only build since it’s 30% smaller.
We can include different builds depending on the bundler that we’re using. For example, in Parcel, we can write:
"alias": {
"vue" : "./node_modules/vue/dist/vue.common.js"
}
in package.json .
Vue CLI
We can Vue-CLI automatically create our app and build it so we don’t have to worry about which bundles to choose.
To install it, we can run:
npm install -g @vue/cli
or:
yarn global add @vue/cli
We can then create a project with it by running:
vue create project
or run:
vue ui
to show the GUI to let us create a Vue project in our browser.
Also, we can run the Vue CLI directly with npx by running:
npx vue create project
Running vue create will present us with a wizard with various options like:
Vue CLI v3.11.0
┌───────────────────────────┐
│ Update available: 4.1.2 │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
This screen is presented when we choose Manually Select Features . We can choose Default if we don’t want to choose anything from this screen.
To run the Vue UI, we can run:
npx vue ui
Then our browser will automatically go to http://localhost:8000/project/select, where we see a Create link to create a project.
We can then create a project by clicking Create a new project here once we clicked on the Create tab.
Conclusion
We can create a new Vue.js app by including it via a script tag or using the Vue CLI or the Vue UI web app.
To get started, we added Vue.js with a script tag and then create a new Vue instance to create an app.
There are various builds of the Vue.js framework. If we need templates, we need the full build unless it’s prebuilt with vue-loader or vueify .
Otherwise, we can use the runtime-only build to reduce the size of it.
