How-to Guide: Adding VueJS to Your Existing Project

Looking to integrate VueJS in an ongoing project? For developers, refactoring existing projects often seems like a drag compared to coding brand new apps. Legacy software may contain outdated code, obsolescent libraries and suboptimal frameworks. However, it may also be powering some vital platforms for stable running businesses.

Even if everything is running fine, it’s still important to make periodic upgrades to keep on top of new developments. Client-side technologies, in particular, can have an important impact on the usability of your applications. So it’s worthwhile to freshen up your front-end, making it more dynamic and interactive. And that’s where a framework like VueJS can really pay dividends.

VueJS is a front-end JavaScript framework. It supports streamlined and dynamic user interfaces without the risk of ‘spaghetti code‘ in your UI layer, posed by some common libraries like JQuery. That makes it a good choice for front-end refactoring in your existing project. It uses the MVVM (model view viewmodel) pattern, which keeps the viewmodel separate from the business logic, meaning you can change your front-end architecture without rewriting your entire application.

Recommended video: Rapid Prototyping With VueJS

Why add a framework to your project?

Broadly speaking, a framework is a way of providing generic structures and functionality for software development. It mandates the use of consistent architectural patterns as well as libraries, components and APIs to simplify application development and ensure consistency. Using frameworks in your web applications can bring in extra dependencies, but it also gives you a headstart with coding and can cut out a lot of boilerplate work. It also helps to keep you on the straight and narrow in terms of modularity and clean coding and can be a boon for refactoring.

Using a front-end framework like VueJS is especially beneficial when you’re upgrading existing functionality, as it helps to ensure proper separation of concerns between your view and model layers. VueJS’s system of reusable components and templates means you keep your interface logic clean with minimal entanglement of HTML and JavaScript snippets. Furthermore, because it uses predominantly declarative rendering, you can more easily keep the display of interactive elements separate from the logic that powers their behaviour or data population.

Get ready: new features Vue3 could bring

VueJS was originally released in early 2014, with the aim of providing a stripped-down alternative to AngularJS. The resulting framework was minimal, lightweight and declarative. The latest major release is Vue3, which promises even faster performance, smaller applications and more power.

We don’t have space here to offer a full rundown of Vue3’s features, but it’s worth noting a few to get an idea of the improvements. For starters, Vue3 offers a slightly different syntax when creating the app. This reduces the chances of global configurations affecting unit tests, as they are made harder to share across multiple apps. Vue3 also cleans up HTML somewhat as it now allows multiple roots within the template – this basically means not having to wrap elements within a containing div.

Vue3 introduces the Composition API to aid reusable code and reduce reliance on over-large components. Reactive references are used to wrap primitive data when you need to track changes. What’s more, in addition to Vue2’s watch function, Vue3 adds watchEffect which will rerun when dependencies change. Vue3’s new composition function provides an alternative way to handle cross-component functionality, rather than mixins. And several new lifecycle hooks have been provided, such as beforeDestroy() and beforeUnmount(). Of course, there are many other upgrades besides this quick selection, not least an overall performance boost.

Step 1: Evaluate and start the implementation

Let’s check the first step to integrate VueJS. Adding a new framework to a project can feel like a risky business. As with any major refactoring process, using a comprehensive test suite will make it much easier to catch errors and make sure you don’t break existing functionality. However, because you’re bringing in VueJS, you’ll also be opening up many more opportunities for fast and dynamic functionality and this is where things get really interesting.

The great thing with Vue is that it sits easily alongside your existing markup with minimal changes. Once you’ve initiated the main Vue object, you can add and change functionality easily without setting off a train of side effects. To get started with Vue, you can simply install it with npm, which comes with Node.js. You’ll need to have Node.js version 15.0 or higher installed. You then just need to run the following command from your terminal:

<code>npm init vue@latest</code>Code language: HTML, XML (xml)

This will install and run create-vue, which automatically creates all your project scaffolding. You’ll then be prompted to include some optional features, but if you’re unsure, the default ‘no’ will be fine.

It’s also possible to get set up without installing anything new on your local machine when you want to opt for a quick try-out. If you prefer to run Vue without a build setup, you simply need to link to a Vue implementation in your HTML:

<code><script src="https://unpkg.com/vue@3"></script></code>Code language: HTML, XML (xml)

Step 2: Vue Components to the rescue!

With either of the above options done, the next step is to initialise a component. Components are the key feature of VueJS, allowing you to create reusable declarative parts for your pages. Each one can contain a mixture of HTML, CSS and JavaScript, which means you can easily refactor your existing views into clean Vue components. As well as standard markup, components include the declarative Vue code where all the magic happens. Declarative here means that rather than describing a control flow, you create elements that react to changes of state.

The next step then is to declare a reactive state with the data component option:

<code>export default {
data() {
return {
message: 'Hello, World!'
}
}
}</code>Code language: JavaScript (javascript)

This gives an idea of the basic form of a Vue app. Of course, your component will do much more than simply specify text strings. You can declare a range of methods, bindings and event handlers to perform dynamic updates in your user interface.

Step 3: Template System

VueJS templates use valid HTML syntax which can be parsed by all standards-compliant browsers. You need to specify a template in your HTML, into which dynamic elements are inserted. Vue compiles templates into a virtual DOM before sending them to the browser. This allows faster performance as there are fewer onward re-renders.

The following is a very minimal example of a Vue template in HTML which outputs a variable, message:

<code><template>
<p>{{ message }}</p>
</template></code>Code language: HTML, XML (xml)

For HTML attributes, the brace syntax cannot be used, so Vue provides bindings to update these dynamically. For example:

<code><div v-bind:id="myId"></div></code>Code language: HTML, XML (xml)

You can also specify event listeners on elements, such

as onclick:

<code><button v-on:click="myFunc">Click</button></code>Code language: HTML, XML (xml)

There are many more directives that can be added in your HTML and you can consult the VueJS documentation for more details.

Step 4: Transitions

VueJS’s optimised reactivity is one of its most appealing features. During render, components track their own reactive dependencies, so the whole process becomes much more efficient. Vue also offers a range of transitions to respond to DOM changes. These include standard CSS animation and transition classes as well as support for third-party CSS libraries. For those who prefer to manipulate the DOM directly with JavaScript, Vue offers transition hooks and it is similarly possible to integrate third-party JavaScript animation libraries.

Best Practices

Though VueJS is a relatively young framework, there are nonetheless a number of emerging best practices. Here are five to get started with:

• Use naming conventions. Use kebab-case for props and events and camelCase for props. Components can have PascalCase or kebab-case. Single-use components should be prefixed with “The” and base components are usually prefixed with “Base”, “V” or “App”.
• Use Keys. Always use keys when iterating over elements. With directives like v-for, behaviour may be unpredictable if you don’t specify a key for your elements.
• Write good definitions for your props. Your code will work without them, but your colleagues (and yourself in future) will be glad of use-cases.
• Don’t overload template expressions. It’s tempting to add extra functionality with JavaScript. However, maintaining the declarative ethos keeps your code clean and intuitive. If you need more complex expressions, it’s best to pull them out into separate components.