Vue 3 and Composition API with Vue Router

In this tutorial, we will learn how to use Vue Router with Vue 3 and the Composition API. Vue Router is the official router for Vue.js and allows us to create single-page applications with Vue.js. The Composition API is a new feature in Vue 3 that provides a more flexible way to create and organize reusable code in Vue components.

Before we begin, make sure you have Vue.js installed in your project. You can install it using npm or yarn:

npm install vue@next

or

yarn add vue@next

Next, install Vue Router:

npm install vue-router@4

or

yarn add vue-router@4

Now that we have installed Vue.js and Vue Router, we can start by creating a new Vue 3 project and setting up Vue Router.

Step 1: Create a new Vue 3 project

Create a new Vue project using the following command:

vue create vue-router-example

Choose the default preset and create the project.

Step 2: Install Vue Router

Install Vue Router in the project using the following command:

npm install vue-router@4

or

yarn add vue-router@4

Step 3: Create a new Vue Router instance

Create a new file called router.js inside the src folder and add the following code:

import { createRouter, createWebHashHistory } from 'vue-router'

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

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

In this code, we are importing createRouter and createWebHashHistory functions from Vue Router. We define an array of routes that map paths to components and create a new router instance using createRouter function. We provide a web hash history mode using createWebHashHistory function.

Step 4: Create Vue components

Create two Vue components called Home.vue and About.vue inside the src/components folder. Add some HTML content to these components to display on the pages.

Step 5: Import Vue Router in main.js

Open the main.js file and import the router instance we created earlier:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

Step 6: Add router-view in App.vue

Open the App.vue file and add the <router-view> component to render the matched component for the current route:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Step 7: Run the application

Run the application using npm run serve and navigate to http://localhost:8080 in your browser. You should see the Home component rendered by default. You can navigate to the About page by going to http://localhost:8080/#/about.

Congratulations! You have successfully set up Vue Router with Vue 3 and the Composition API. You can now create single-page applications with Vue.js using Vue Router. Explore more features of Vue Router and the Composition API to build more complex applications with Vue.js.