Vue.js 3 SPA Basic Setup with Vue Router

Setting up a simple Vue.js 3 single-page application with Vue Router, demonstrating how to define routes and render components for each route.

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';

// Import your components
import Home from './components/Home.vue';
import About from './components/About.vue';

// Define routes
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

// Create router instance
const router = createRouter({
  history: createWebHistory(),
  routes
});

// Create and mount the root instance
const app = createApp(App);
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router);

app.mount('#app');

This code initializes a Vue 3 application, sets up Vue Router with a couple of routes, and mounts the application to the DOM. The routes are defined to render 'Home' and 'About' components when navigating to '/' and '/about' paths respectively.