Skip to content

Vue

Vue adds interactive pieces to a web page. Start with one widget or use reusable components to build a larger interface.

Visit Vue

What can Vue add to a page you already have?

Vue, also called Vue.js, can take over one part of an existing page. You could add a time picker to an appointment page while keeping its current header, pricing and contact details.

The simplest setup loads Vue from a script and attaches it to one part of the page. You can use this with ordinary HTML and skip the build step that prepares code for a website. If you later want a reusable .vue file that holds the markup, behavior and styles together, start a Vue project with the build setup instead.

How can you tell if the time picker saved anything?

Use a local practice page with two made-up times. In this example the line below the buttons remembers the choice while the page is open. A customer would need a separate, shared record before they could treat it as an appointment.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Practice time picker</title>
<div id="picker">
  <button type="button" @click="time = '3:00'">3:00</button>
  <button type="button" @click="time = '3:30'">3:30</button>
  <p aria-live="polite">{{ time ? 'Selected ' + time : 'Choose a time' }}</p>
</div>
<script src="./vue.global.js"></script>
<script>
  Vue.createApp({
    data() { return { time: '' } }
  }).mount('#picker')
</script>
</html>
  1. Open a local practice copy
    Save the sample as index.html. From the Quick Start, download vue.global.js and put it in the same folder. Use a disposable folder separate from an existing app.
  2. Pick a time and look below the buttons
    Choose 3:00, then 3:30. The line should show the latest choice. This is Vue state, a value the interface remembers while it is open.
  3. Check what a fresh visit knows
    Open the practice page in a new tab. It should ask you to choose again. For a real reservation, ask the server to check the time and save it before showing a receipt.

When do Vue Router or Nuxt become useful?

Vue Router is an option when a Vue interface needs addresses for different screens. Nuxt is a separate application framework built on Vue. It can organize page addresses and server code in the same project.

What changes as the app grows
What you needWhat to set up
Several screen addressesUse Vue Router or a framework that supplies routing. For normal Vue Router addresses, refresh a nested page on your host to check that it sends visitors back to the app.
A booking saved from different devicesConnect a separate service or add server code in a framework such as Nuxt. The app still needs a database and a rule for what happens when two customers want the same time.
HTML prepared on a serverVue provides a server renderer. Nuxt supplies a larger project setup for this. Check that your host supports the server features you use.

What should you keep before moving a Vue site?

Keep the editable pages or component files, images and the saved dependency versions. For a browser-only project built with Vite, the host can serve the generated files. Keep the source as well so the next person can change the site.

Vue’s code uses the MIT license. Hosting and connected services have their own terms and costs. If your site saves bookings or lets people sign in, include those records, settings and any uploaded files in the move. Test one old page address and one saved record on the new setup before sending visitors there.