Integration into an existing project
Among other things, Vue.js is popular among developers, because it has the ability to be easily integrated into an existing project, it is enough to insert a skip at the bottom of the body section, which is located on the CDN:
|
1 |
<script src="https://unpkg.com/vue@3.5/dist/vue.global.prod.js"></script> |
|
1 |
<script src="https://cdn.jsdelivr.net/npm/vue"></script> |
When we have the Vue.js library available within the project after this script tag, it is enough to open a new script tag within which the instance will be created.
In the case of version 3.0, the syntax has been slightly changed (see what caused these changes on the official site), so instantiating a Vue object looks like this:
|
1 |
let app = Vue.createApp({ // Options object }); |
In this version, after instantiation, it is still necessary to perform “mounting” ie. binding the instance to the HTML element.
|
1 |
let vm = app.mount("#app") |
So the whole code would look like this:
|
1 2 3 |
let app = Vue.createApp({ // Options object }); let vm = app.mount("#app") |
Example (3.0 ver):
See the Pen
Untitled by Web Programming (@chos)
on CodePen.
Every Vue application must have an instance created based on the Vue() constructor function. The data necessary to create a new instance is passed to the constructor function through the so-called “options object”. To create a new instance, it is enough to call the constructor function with the keyword new.
|
1 |
new Vue( { // this is the so-called options object } ) |
If we need to access the properties of the Vue instance outside the instance itself, then it is necessary to assign the created instance to a variable:
|
1 2 3 |
var vm = new Vue({ // "options object" }) |
Multiple Vue instantiations are allowedinstances, but each of the instances must “control” different parts of the HTML, because it is not allowed to bind one instance to multiple different HTML parts. However, there is often a need to embed multiple identical or similar repeating HTML elements (such as a product) into a web application, yet still be linked to Vue.js instances. Since it is not allowed to bind one instance to several different HTML parts, in that case you should create a Vue.js component and embed it multiple times.
Generating a project (recommended: Vite / create-vue)
Vue 3 note (2026): The recommended way to start a Vue 3 app is npm create vue@latest (Vite-based). Vue CLI is in maintenance mode and is shown below only for legacy projects.
|
1 2 3 4 |
npm create vue@latest my-project cd my-project npm install npm run dev |
Legacy: vue-cli
Vue.js previously provided vue-cli to scaffold projects. First we need to have vue-cli installed, which is later used to create the starter project.
To install a Vue.js 3.0 project, you need a client whose version at least starts with 4.x and we need to have at least 8.0 version of node.js installed (how to install or update node.js, see the article “Installation of web development tools”). Once we have node.js installed then vue-cli 3.0 is installed globally using the command:
npm install -g @vue/cli
NOTE:
If we already have the Vue client installed, but it’s an older version, we have to update it. We check the version with:
vue -V
And if an update is necessary, we do it with:
npm update -g @vue/cli
After vue-cli is installed we can generate a new starter project with the command:
vue create [options] project-name
The options available when creating a project are:
- –default or -d for short (skips all installation questions and installs the default set)
- –preset <presetName> or abbreviated -p (skips all installation questions and installs a prepared set, the so-called “preset”)
- –inlinePreset <json> or abbreviated -i skips all installation questions and uses inline JSON as a preset)
- –force or abbreviated -f (if there is a folder with the same name then overwrite it)
With the default set, a local server is installed, as well as the installation of “babel”, “eslint” and “autoprefixer” plugins. Along with this default set also comes a pragmatic way to select supported browsers called “browserlist”, with whichwe take into account that newer browsers already support the new ES standards and that they do not need to add a prefix within CSS. This intelligent way of selection allows us to get a smaller code size.
With such a generated project, “vue-router” is not installed, nor is vue state management “vuex”, so if we need it, we have to install them later as npm packages:
npm install vue-router
npm install vuex –save
After creating the project, use the terminal to enter the project folder and start the local server with the command:
npm run serve
We can access the server from a local machine via the url: http://localhost:8080/, while access within the same network but from another device can be obtained at the url address: http://192.168.0.104:8080/
To start JS lint we use:
npm run lint
While for creating the production version of the project we use the command:
npm run build
npm install –global vue-cli
After installing vue-cli, we can choose one of the predefined project types, see more about possible installations on the official github page Vue templates.
This article explains the so-called “full webpack” starter project, within which all modern tools that make up one framework are integrated. The most important is Webpack, which allows us to use Babel, SCSS loader, etc. The project is generated with:
vue init webpack project-name
After generating the project, we need to install all dependencies defined in package.json. To execute the command, it is necessary to “enter” the project in the terminal and start the command:
cd project-name
npm install
Also this project comes with a local dev server, so after installing the dependencies we can start the development server with the command:
|
1 |
npm run dev |
Sever will load the page at: localhost:8080 every time the project changes. In addition to the server in the development environment, we also get:
- vue-loader to load a single file Vue component
- Linting code
- Source maps
NOTE:
If you look at the file “index.html”, you will notice that a script is embedded in it with a folder location called “dist”. However, it is not in development mode, it is generated only after the command to build a project that is ready for production. In development mode, all javascript files are kept in memory.
After completing the project, we can generate all files for production with the command:
npm run build
After building the project we get:
- JavaScript minified with UglifyJS
- HTML minified with html-minifier
- All CSS files minified into one file with cssnano
With this starter project comes integrated testing support. And unit tests are written in JSDOM with Jest, command:
npm run unit
While End-to-end tests are run with the Nightwatch command:
npm run e2e
Generating a project with Nuxt.js
Nuxt.js is a framework built on top of Vue.js, which helps you easily create Vue.js applications that are re-rendered on the server. “Server-Side Render App”. Nuxt.js abstracts away most of the complex configuration involved in managing things like handling asynchronous data collection, middleware, and routing. It is similar to “Angular Universal” which is built on top of Angular.js, or “Next.js” which is used for React.js.
Nuxt.js is an advanced topic and will be explained in detail in future articles, but it is mentioned here as another way to create a starter project powered by Vue.js. Creating a starter project with Nuxt.js is also done from vue-cli with the following command:
vue init nuxt-community/starter-template project_name
After this, it is necessary to enter the created project and install all dependencies defined in package.json
cd project_name
npm install
We are now ready to start the server and go to work using the command:
npm run dev
The application is available at http://localhost:3000