VueJS doesn't have to be a Single-Page Application
What is VueJS?
VueJS is a progressive JavaScript framework that is incredibly adaptable. It is often brought up along with other popular JavaScript frameworks and libraries such as ReactJS and Angular. It was made by Evan You (also the founder of Vite which is a widely used frontend build tool) and has a large ecosystem of libraries and frameworks that are widely used throughout VueJS applications and pages. VueJS is often compared against ReactJS as they look and function somewhat similarly with a few differences.
The Goal of this Article
Often times Vue is known to be a Single-Page Application, and while it definitely can and it does a great job doing so, I would like to show an alternative way of utilizing Vue. Instead of using full Single-Page Application architecture, Vue can be used to easily plug and play into existing pages and applications with relative ease without the requirement of having a full SPA with routing, state management and all of the other complexities that come with a Single-Page Applications.
This article will not be an in depth guide on how to use Vue (though we will touch a few introductory level concepts). In this article, I will be using raw HTML pages as well as a .NET application with Razor pages to show how we can implement Vue into certain pages, however these same principles and ideas can be utilized across various scenarios. For the examples that will be shown in this post we will be using the modern Vue3 version, however the older Vue2 version may also be used.
Why Would I Not Just Use a Single-Page Application?
Vue does a great job of being a Single-Page Application but there are a few reasons why you may want to go this route rather than building an entire SPA:
- Adoption With Legacy Codebases
- Often times as developers we have a pre-existing codebase we need to work with. Lets say that we have a 10 year old .NET MVC Application and we want to add modern Vue functionality to it. To do this would potentially cost months of development time rewriting the entire codebase.
- Often times as developers we have a pre-existing codebase we need to work with. Lets say that we have a 10 year old .NET MVC Application and we want to add modern Vue functionality to it. To do this would potentially cost months of development time rewriting the entire codebase.
- Reduced Complexity
- SPAs introduce overhead that may not be justified for your specific use case:
- SPA Routing - Separate frontend routing
- Build Tooling - Managing the full frontend ecosystem
- API Design - Full API interface is needed for all data
- State Management - For complex state management, some form of state management tooling is needed to track state across various pages (VueX, Pinia)
- SPA Routing - Separate frontend routing
- SPAs introduce overhead that may not be justified for your specific use case:
- Simplifying Deployments
- Keeping Vue as a non-SPA integration means there are no changes needed for deployment pipelines
- Keeping Vue as a non-SPA integration means there are no changes needed for deployment pipelines
- Gradual Adoption Process
- Adding Vue to individual pages can allow for a team to get familiar with Vue and slowly start sprinkling in pieces as quickly or as slowly as they want
- Adding Vue to individual pages can allow for a team to get familiar with Vue and slowly start sprinkling in pieces as quickly or as slowly as they want
The Basics with plain HTML
Let's start with a very basic HTML page with a simple table on it:
1<body>
2 <div class="container" id="tableapp">
3 <h1>User Data Table</h1>
4 <table>
5 <thead>
6 <tr>
7 <th>ID</th>
8 <th>Name</th>
9 <th>Email</th>
10 <th>Role</th>
11 <th>Status</th>
12 </tr>
13 </thead>
14 <tbody>
15 <tr>
16 <td>1</td>
17 <td>John Doe</td>
18 <td>john.doe@example.com</td>
19 <td>Admin</td>
20 <td>Active</td>
21 </tr>
22 <tr>
23 <td>2</td>
24 <td>Jane Smith</td>
25 <td>jane.smith@example.com</td>
26 <td>User</td>
27 <td>Active</td>
28 </tr>
29 <tr>
30 <td>3</td>
31 <td>Bob Johnson</td>
32 <td>bob.johnson@example.com</td>
33 <td>User</td>
34 <td>Inactive</td>
35 </tr>
36 <tr>
37 <td>4</td>
38 <td>Alice Williams</td>
39 <td>alice.williams@example.com</td>
40 <td>Manager</td>
41 <td>Active</td>
42 </tr>
43 </tbody>
44 </table>
45 </div>
46</body>To add VueJS to this page, it's pretty simple. We need to import Vue and then mount it to an element.
- Add the script to the file
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>- Create the Vue instance and mount it to an element (ideally a root level element where you want the Vue functionality to function)
1<script>
2 const { createApp, ref } = Vue
3 createApp({
4 setup() {
5 const message = ref('Hello vue!')
6 return {
7 message
8 }
9 }
10 }).mount('#tableapp')
11</script>And just like that, we now have a Vue instance on the page.
- Then we can use that message ref and display it on our page
1<body>
2 <div class="container" id="tableapp">
3 <!-- Add message here -->
4 <div>{{ message }}</div>
5 <h1>User Data Table</h1>
6 <table>VueJS proves that modern doesn’t have to mean a full rebuild. You can start small, enhance what you already have, and evolve your app at your own pace—without the overhead of a full SPA. Whether it’s a simple component or a richer interactive experience, Vue gives you the flexibility to modernize on your terms.
Frequently Asked Questions
Latest Posts
We’ve helped our partners to digitally transform their organizations by putting people first at every turn.
.avif)
Everyone talks about code quality like it’s something you fix after an issue, but in reality it should start long before the first line is written. Pair programming makes this possible, turning early collaboration into cleaner, more resilient code.
This blog primarily draws on Conversational AI for examples, but there are many otherways to integrate Generative AI into a project, and I hope there is helpful information for thosepursuits as well.
This post explores how Web Components — a decade-old but often overlooked web standard — proved to be the perfect fit for a client needing a framework-agnostic component library. Our team shares the practical benefits, challenges, and lessons learned from applying this mature technology to solve a modern problem.
Discover how applying decision-making frameworks can turn system bottlenecks into strategic opportunities that accelerate business growth rather than slow it down.
AI coding tools make building software easier, but they're creating dangerous security blind spots for non-technical developers who don't understand the code they're deploying.
Continuing our guide to testable front-end code with advanced patterns, real-world examples, and the traps that even experienced devs miss.
A practical guide to writing testable front-end code, mocking strategies, and applying best practices to ensure your codebase stays clean, maintainable, and covered.
Think your MCP server is safe? One poisoned tool could quietly turn it into a data-leaking backdoor.
Most companies don’t need a full-time AI exec—they need smart, fractional leadership that aligns AI with real business goals.
Struggling with large file uploads in React Native? We hit memory leaks and corrupted files over 2GB—then fixed it by building native modules. Here’s how.
How AI Is Changing the Way We Build Software: Our developers are using AI tools like GitHub Copilot to move faster and smarter—shifting from manual coding to strategic prompting and editing. Learn how this evolving approach is helping us deliver high-quality software in less time.
The RFP process is broken. Here's how public sector teams can get better outcomes by partnering earlier, focusing on users, and rethinking how government tech gets built.
Nurturing junior developers in today’s remote and AI-driven workplace is essential for long-term success, yet it comes with unique challenges. This article explores practical strategies to help junior talent thrive.
Effective discovery is crucial in software development to prevent budget overruns and project delays. By conducting discovery sprints and trial projects, businesses can align goals, define scope, and mitigate risks, ensuring successful outcomes.
In this article, we address the advantages and disadvantages of native apps and compare them to those of React Native apps. We will then propose one example of a ‘good fit’ native app and a ‘good fit’ React Native app. The article concludes with a general recommendation for when you should build your application natively and when to do so in React Native.
Adoption of cloud services like Microsoft Azure is accelerating year over year. Around half of all workloads and data are already in a public cloud, with small businesses expanding rapidly and expecting up to 70% of their systems to be in a public cloud within the next 12 months. Are you sure your data is secure?
In this short article I would like to show you one example of High Cohesion and Low Coupling regarding Software Development. Imagine that you have a REST API that have to manage Users, Posts and Private Message between users. One way of doing it would be like the following example: As you can see, the […]
Custom software is a great way to increase efficiency and revenue for your organization. However, creating custom software means more risk for you. Here are a few common problems to avoid when building your next mobile or web app. 1. Cost Overrun One of the biggest challenges of custom software development is gathering requirements. The process […]
So, you want to build some software. But where do you start? Maybe you’re not ready to take on the large task of hiring a team internally. Of all the options out there for building your software, two of the most common are staff augmentation and project-based consulting. So what’s best for you, staff augmentation […]
Failed implementing agile in your organization? Agile isn't the problem.
Are you ready to hire software developers? It might be worth more investigation.
Solve your next production issue with less headache and better insight.
How to use empathy to drive decisions around the platform for your future application.
