• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Codemotion Magazine

Codemotion Magazine

We code the future. Together

  • Discover
    • Live
    • Tech Communities
    • Hackathons
    • Coding Challenges
    • For Kids
  • Watch
    • Talks
    • Playlists
    • Edu Paths
  • Magazine
    • Backend
    • Frontend
    • AI/ML
    • DevOps
    • Dev Life
    • Soft Skills
    • Infographics
  • Talent
    • Discover Talent
    • Jobs
  • Partners
  • For Companies
Home » Frontend » JavaScript » How-to Guide: Adding VueJS to Your Existing Project
JavaScript

How-to Guide: Adding VueJS to Your Existing Project

VueJS is a light-weight framework for user interfaces. It can aid with refactoring view layers. Learn how to integrate VueJS into your apps

August 8, 2022 by Codemotion

integrate VueJS
Table Of Contents
  1. Why add a framework to your project?
  2. Get ready: new features Vue3 could bring
  3. Step 1: Evaluate and start the implementation
  4. Step 2: Vue Components to the rescue!
  5. Step 3: Template System
  6. Step 4: Transitions
  7. Best Practices

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

Loading the player...

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.
facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Front-End VueJS

11 DevOps Podcasts You Should Be Listening To
Previous Post
Video: Combining Jamstack, Vue.js, and a Headless CMS
Next Post

Related articles

  • React Native: Alive and Kicking in 2022
  • Ten Reasons Why I Think Alpine.js Can Do “Magic”
  • JavaScript: A First Look at the Type Annotation Proposal
  • Svelte: Why Is It an Innovation to Javascript Frameworks?
  • 5 JavaScript Frameworks to Follow in 2022
  • Video: Let’s Build a Modern React Application
  • 6 Ways to Implement Metaprogramming in JavaScript with Proxies
  • Increase Your Speed and Efficiency With These 20 Incredible JavaScript Tips and Tricks
  • The Ultimate Guide to JavaScript | Learn JS to Grow Your Career
  • Best JavaScript Alternatives for Web Developers

Primary Sidebar

Learn new skills for 2023 with our Edu Paths!

Codemotion Edu Paths for 2023

Codemotion Talent · Remote Jobs

Game Server Developer

Whatwapp
Full remote · TypeScript · Kubernetes · SQL

Back-end Developer

Insoore
Full remote · C# · .NET · .NET-Core · Kubernetes · Agile/Scrum

Full Stack Developer

OverIT
Full remote · AngularJS · Hibernate · Oracle-Database · PostgreSQL · ReactJS

Data Engineer

ENGINEERING
Full remote · Amazon-Web-Services · Google-Cloud-Platform · Hadoop · Scala · SQL · Apache-Spark

Latest Articles

Will Low-Code Take Over the World in 2023?

Frontend

Pattern recognition, machine learning, AI algorithm

Pattern Recognition 101: How to Configure Your AI Algorithm With Regular Rules, Events, and Conditions

AI/ML

automotive software

Automotive Software Development: Can Agile and ASPICE Coexist?

DevOps

programming languages, 2023

Which Programming Languages Will Rule 2023?

Infographics

Footer

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a Contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • RSS

DOWNLOAD APP

CONFERENCE CHECK-IN