Integrating Vue CLI in an Existing Project
When you have an existing project and would like to use Vue.js (in combination with Single File Components), it can be a struggle to get your .vue files compiled when you also needing to support IE11.
This article describes how you can use the Vue CLI in an existing project, without much knowledge of webpack.
Introduction
When I was facing this issue, I couldn’t find any matching article (that was not outdated) on medium. That’s why I decided to write this article for anyone who is searching for this information.
Two very important requirements I had to meet:
- In an existing project, files with the .vue extension needed to be compiled;
- Website needs to work in IE11.
Wait, Is this article the right one for me?
I wrote this article for everyone, but some knowlegde may be required to fully understand everything I am addressing:
- Knowledge of Vue.js;
- You understand how to setup a project with the
vue-cliand specificly with thevue create [my-app]command.
The journey
The first thing I thought: Okay, lets try this with webpack. Vue has some documentation how you can manually configure webpack to compile .vue files.
I configured it the way it was specified and everything was working well. But when I viewed the website in IE11 it was just blank.
Help!
When trying to implement babel-loader into my webpack.config.js I got into a black hole trying to get the .vue files to compile by vue-loader and after that ‘pipe’ through some babel-loader before bundling. I always found webpack very abstract and I realised myself that my knowledge of webpack is just not sufficient enough.
But wait! I realised myself that Vue does a lot of *magic* when you use the vue-cli to create a project. When creating a project in that way, it does compile .vue files ánd pipe it though some babel-loader.
How does Vue do that and can’t I use the same way in an existing project? First I need to find out how exactly the vue-cli works.
How Vue-cli works
When you start with a new vue-project, there are several options to include vue.js in your website, according to: https://vuejs.org/v2/guide/installation.html
Simply type in the terminal vue create [name-of-my-app] and it will create a new Vue.js project with a lot of configuration (the *magic* I was referring to).
When the wizard is finished, you will be asked to navigate into the folder with cd name-of-my-app. After that you can just run npm run serve.
If you look into the package.json you will see that this magic command just added a “scripts” property with two npm-scripts you can use.
More info about npm scripts here: https://docs.npmjs.com/cli/v7/using-npm/scripts
Look at what that serve script does. It will use the vue-cli-service with some options, in this case there is only one option used: serve.
Specifying this serve option will look at the default entry point src/main.js and starts a development server (based on webpack-dev-server) with hot-module-replacement.
Hot-module-replacement updates modules on the page without a full reload which speeds up development.
We will use these npm-scripts as a basis for integrating the vue-cli service into an existing project.
Integrating the vue-cli-service
When you navigate to the documentation of the vue-cli, you will find all the information needed to configure it in a existing project.
The issue of an existing project is that the folder structure can be different. Your entry file is probably in another place and perhaps you would like a different bundle being generated. All of these options can be configurated by the vue-cli-service.
The various options of the vue-cli-service
The vue-cli-service comes with various options that we can use to configure different modes, targets, etc.
In my existing project, it was not needed to have a dev-server running with hot-module-replacement. That’s why I only went with the build command of the vue-cli-service. I will only reference to this build-command in this article.
Our folder structure
Here is our folder structure. I will place it just here so that any of the following examples makes sense.
| scripts
| -- components
| ----- Header.vue
| ----- Footer.vue
| -- App.vue
| -- base.js
|index.htmlThe base.js file imports the App.vue.
App.vue has two components: Header.vue and Footer.vue.
Specifying an entry/output
One of the issues is that some information is a little harder to find, for example: specifying an input.
Head over to package.json. When we look at the options we can specify a different entry for the build-command. It’s been done by adding the folder-path as the last item to the string. Like this:
"scripts": {
"build": "vue-cli-service build scripts/base.js"
}Outputting a file can be done by specifying a --dest. For example. If we would like our files outputted inside a newly, created folder named ‘dist’ inside our scripts-folder we should add --dest scripts/distto our command. Like this:
"scripts": {
"build": "vue-cli-service build --dest scripts/dist scripts/base.js"
}Watching files
Something really useful of the servecommand is that it will automatically re-compile your code when any file changes.
The build-command has also a --watch option.
Simply add --watch to our build-script and every time any file updates, our output file will re-compile.
"scripts": {
"build": "vue-cli-service build --watch scripts/base.js"
}All together
Using and configuring the vue-cli-service can be really useful when you would like to custom-configure your build but you don’t want to avoid writing a custom webpack config and still having to configure the vue-loader, style loaders ánd babel.
Here is an example, combining an entry point and the options --dest and --watch.
"scripts": {
"build": "vue-cli-service build --watch --dest scripts/dist scripts/base.js"
}vue-cli-service to the rescue! :)
Thanks for reading this article. I hope it was helpful to you. If you have any questions or suggestions to make this article even better, don’t hesitate to leave a response.
