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.