A few months back I started to integrate Vue.js into an existing site at work. There was a new page they wanted that had a somewhat complicated UI so I thought it would be a good way to get some more experience with Vue. Since most tutorials teach you Vue from a standpoint of building a new site, I had to dig a little deeper to find out the best way to use Vue on an existing site. Here’s some of the more helpful things I learned while working on this project.

Note:
I’ll preface this by saying prior to Vue, as far javascript goes, I mainly used a combo of vanilla javascript and jQuery. I didn’t really use webpack or any other bundler so some of these might be obvious, but if you’re new to webpack and/or Vue, these will hopefully be helpful!

1. The ‐‐watch argument

When you use vue-cli to create your initial Vue project, you get 3 shortcut commands that you can use: npm run build, npm run serve and npm run lint. The only one that you’ll really use when you build for an existing site is the npm run build command when you’re ready to push your code to production.

There are however, some other commands you can use that will help. The main one that you will want is:

.\node_modules\.bin\vue-cli-service build --watch

This will build your app in development mode and any time you make a change to your code, it will rebuild. It’s similar to the npm run serve shortcut command you get except it doesn’t run a server.

You can also add another argument to this: ‐‐dest to tell the vue-cli-service where to put the compiled code. Here’s an example of that:

.\node_modules\.bin\vue-cli-service build --watch --dest '../public/vue'

2. Pages

Some people recommend creating separate Vue projects for each page when you’re working with either multi-page apps or if you’re integrating Vue into an existing app. This might be useful if your pages don’t share anything at all, but if they do, it might be helpful to use Vue’s pages feature.

You can set up separate entry points for each page you’re building. If you’re not sure what that is, it’s the main.js file that’s created with the initial Vue project that you create. So say you have a product page component, you’d build an entry point file that loads up that component first. Then if you also had a checkout page component, you’d create another entry point file that loaded up that component first, and so on.

To configure pages, you need to create a vue.config.js file in your root project directory and add the following bit of code:

module.exports = {
	pages: {
		page_one: 'src/page/one/entry/file.js',
		page_two: 'src/page/two/entry/file.js'
	}
}

Then when you go to compile your code with npm run build, it will generate separate files for each page as well as a common file that both pages share. If you want to learn more about the pages feature, check out the Vue.js documentation here.

3. Turn off filename hashing

With you most likely not using the auto-generated index.html file that’s created when your project is built, you’re going to need to put script tags manually on whichever page you’re using your Vue app. By turning off filename hashing you won’t need to constantly go back and change the name of the javascript file in your existing project.

To turn off filename hashing, you’ll need to add the following to your vue.config.js file:

module.exports = {
	filenameHashing: false
}

Bonus Tip: Auto-Upload

If you aren’t working on your dev server directly, your development time will go a lot faster if you have something that’s auto-uploading your compiled files to your server. So, I would suggest using an IDE that lets you do this if you aren’t already. For me, I use Visual Studio Code and the ftp-sync extension.

---

Hopefully at least one of those tips were helpful for you! If you have any feedback or questions feel free to leave a comment below!