Vue can be used in several ways, in different complexity Apps and projects. Here you will find the description of possible ways of usage Vue framework for different projects.
- Enhancing static HTML without a build step
What are characteristics of using Vue as standalone script file?
No build step required.
If you have a backend framework already rendering most of the HTML, or your frontend logic isn’t complex enough to justify a build step, this is the easiest way to integrate Vue into your stack.
Vue can be considered as a more declarative replacement of jQuery in the case of standalone script usage.
In no-build-step scenarios Vue provides an alternative distribution called petite-vue library which is extremely lightweight.
petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model as standard Vue. However, it is specifically optimized for “sprinkling” a small amount of interactions on an existing HTML page rendered by a server framework. See more details on how it differs from standard Vue.
- Only ~6kb
- Vue-compatible template syntax
- DOM-based, mutates in place
- Driven by
@vue/reactivity
2. Embedded Web Components on any page
Embedded Web Components are the set of web native APIs that allows developers to create reusable custom elements.
You can use Vue to build standard Web Components that can be embedded in any HTML page, regardless of how they are rendered. This option allows you to leverage Vue in a completely consumer-agnostic fashion: the resulting web components can be embedded in legacy applications, static HTML, or even applications built with other frameworks.
Web Components are a set of web platform APIs that allow developers to create reusable, encapsulated HTML elements that can be used across different web applications. They enable you to build custom components with their own structure, styling, and behavior, which can then be used just like any standard HTML element. Web Components consist of three main technologies:
1. Custom Elements
- This allows you to define your own HTML tags and their associated behavior. Once a custom element is created, it can be used in your web pages just like any native HTML element.
- Example:
<my-button></my-button>
2. Shadow DOM
- Shadow DOM provides encapsulation by allowing developers to attach a hidden DOM tree to a component. This means styles and scripts within the component do not affect the rest of the page, and vice versa.
- Example: A custom button might have its own internal DOM structure and styles that don’t interfere with global styles.
3. HTML Templates
- HTML templates define markup that can be reused later. Template content is not rendered when the page loads but can be instantiated later using JavaScript. This is often used to define reusable content for custom elements.
- Example:
<template>...</template>
Key Benefits of Web Components:
- Reusability: You can create components that are used across projects and pages.
- Encapsulation: The internal styles and scripts of a component won’t affect the outside world and vice versa.
- Interoperability: Web Components can work with any JavaScript framework (Vue, React, Angular, etc.) or even no framework at all.
In essence, Web Components provide a native, framework-agnostic way of building modular and reusable components for the web.
The primary benefit of custom elements is that they can be used with any framework, or even without a framework. This makes them ideal for distributing components where the end consumer may not be using the same frontend stack, or when you want to insulate the end application from the implementation details of the components it uses.
3. Single-Page Application (SPA)
Some applications need advanced interactivity, deep user sessions, and complex state management on the frontend. The most effective way to build these applications is by using an architecture where Vue not only manages the entire page but also handles data updates and navigation seamlessly, without requiring full-page reloads. This kind of application is known as a Single-Page Application (SPA).
Vue offers essential libraries and extensive tooling to create modern SPAs, delivering an exceptional developer experience. This includes:
- Client-side routing
- A fast and efficient build toolchain
- Integrated IDE support
- Browser development tools
- TypeScript compatibility
- Testing utilities
While SPAs generally rely on backend APIs, Vue can also be paired with tools like Inertia.js, allowing you to enjoy SPA-like interactivity while maintaining a server-driven development approach.
4. Fullstack / Server-Side Rendering (SSR)
Pure client-side SPAs can pose challenges when SEO and fast time-to-content are crucial. This is because the browser initially receives an empty HTML shell and must wait for JavaScript to load before rendering any content.
To address this, Vue offers powerful APIs for server-side rendering (SSR), which allows Vue apps to be converted into HTML strings on the server. This way, the server sends back fully rendered HTML, enabling users to view content immediately while JavaScript loads in the background. Vue then “hydrates” the app on the client side, making it interactive. SSR significantly enhances performance metrics like Largest Contentful Paint (LCP), a key part of Core Web Vital, and provides great SEO for the web-site.
Additionally, higher-level Vue frameworks, such as Nuxt, build on this approach, enabling developers to create fullstack applications with Vue and JavaScript.
5. Jamstack / Static Site Generation (SSG)
Server-side rendering can be done ahead of time when dealing with static data. This process, called Static-Site Generation (SSG), pre-renders the entire application into static HTML files that can be served directly. This approach boosts site performance and simplifies deployment since pages no longer need to be dynamically rendered on each request. Vue can still hydrate these static pages to enable rich interactivity on the client. This technique is commonly associated with the JAMStack architecture.
SSG comes in two types: single-page and multi-page. Both pre-render the site as static HTML, but differ in how they handle navigation:
- In single-page SSG, after the initial load, the page is hydrated into an SPA. This requires more upfront JavaScript and a higher hydration cost, but subsequent navigations are faster since only parts of the page are updated instead of reloading the whole page.
- In multi-page SSG, a new page is loaded on each navigation. This reduces the JavaScript payload, or even eliminates it when no interactivity is needed. Some frameworks, like Astro, also support partial hydration, allowing interactive Vue components to be embedded in static HTML pages as isolated “islands.”
Single-page SSG is ideal for applications with significant interactivity, long sessions, or state persistence across pages. Multi-page SSG is more suitable for simpler sites where minimal or no interactivity is required.
Vue also supports SSG through VitePress, a static-site generator that powers this very site. VitePress handles both single-page and multi-page SSG. Additionally, Nuxt offers full SSG support and even lets you mix SSR and SSG for different routes within the same application.
6. Targeting desktop, mobile, WebGL, and even the terminal
Beyond the Web
Although Vue is primarily designed for building web applications, it is by no means limited to just the browser. You can:
- Build desktop apps with Electron
- Build mobile apps with Ionic Vue
- Build desktop and mobile apps from the same codebase with Quasar or Tauri
- Build 3D WebGL experiences with TresJS
- Use Vue’s Custom Renderer API to build custom renderers, like those for the terminal!
