{"id":247,"date":"2022-06-03T15:46:58","date_gmt":"2022-06-03T15:46:58","guid":{"rendered":"https:\/\/felixaugenstein.com\/blog\/?p=247"},"modified":"2022-06-03T15:47:02","modified_gmt":"2022-06-03T15:47:02","slug":"getting-started-with-vue-router-in-vue-js-3-to-create-a-few-sections-for-the-app-and-a-menu","status":"publish","type":"post","link":"https:\/\/felixaugenstein.com\/blog\/getting-started-with-vue-router-in-vue-js-3-to-create-a-few-sections-for-the-app-and-a-menu\/","title":{"rendered":"Getting started with Vue router in Vue.js 3, to create a few sections for the app and a menu"},"content":{"rendered":"\n

If you have been following the previous Vue.js 3 tutorials, to create a new project<\/a> or the Composition and Options APIs<\/a>, and now you would like to build an application with a few sections and a menu, this is the right tutorial for you.<\/p>\n\n\n\n

In this tutorial we will install Vue router, create some sections like Home and About for our app and set up a menu to access these sections.<\/p>\n\n\n\n

The finished directory structure for the source folder of this Vue project is going to look like this:<\/p>\n\n\n\n

src\n\u251c\u2500\u2500 assets\n\u251c\u2500\u2500 components\n\u2502   \u2514\u2500\u2500 MenuComponent.vue\n\u251c\u2500\u2500 router\n\u2502   \u2514\u2500\u2500 router.js\n\u251c\u2500\u2500 views\n\u2502   \u251c\u2500\u2500 AboutView.vue\n\u2502   \u251c\u2500\u2500 HomeView.vue\n\u2502   \u2514\u2500\u2500 NotFoundView.vue\n\u251c\u2500\u2500 App.vue\n\u2514\u2500\u2500 main.js<\/code><\/pre>\n\n\n\n
Setting up the views<\/h2>\n\n\n\n
At first let’s set up our views directory with 3 files:<\/p>\n\n\n\n
  1. HomeView.vue<\/li>
  2. AboutView.vue<\/li>
  3. NotFoundView.vue<\/li><\/ol>\n\n\n\n
    For the HomeView.vue, paste in the following lines of code and adapt the H1, paragraph and component name for the AboutView and NotFoundView respectively with a message of your choice.<\/p>\n\n\n\n
    <template>\n    <h1>Home<\/h1>\n    <p>This is the home section<\/p>\n<\/template>\n\n<script>\nexport default {\n    name: 'HomeView'\n}\n<\/script>\n\n<style scoped>\n<\/style><\/code><\/pre>\n\n\n\n
    Vue router installation<\/h2>\n\n\n\n
    Secondly, let’s install vue router in our project directory using npm or yarn.<\/p>\n\n\n\n
    npm:<\/p>\n\n\n\n
    npm install vue-router<\/code><\/pre>\n\n\n\n
    yarn:<\/p>\n\n\n\n
    yarn add vue-router<\/code><\/pre>\n\n\n\n
    Configuring our router<\/h2>\n\n\n\n
    Now let’s create the new directory router and inside a file called router.js with the following lines of code:<\/p>\n\n\n\n
    import {\n    createWebHistory,\n    createRouter\n} from 'vue-router'\nimport HomeView from '..\/views\/HomeView.vue'\nimport AboutView from '..\/views\/AboutView.vue'\nimport NotFoundView from '..\/views\/NotFoundView.vue'\n\nconst router = createRouter({\nhistory: createWebHistory(),\nroutes: [\n    {\n        path: '\/',\n        component: HomeView,\n        name: 'HomeView',\n    },\n    {\n        path: '\/about',\n        component: AboutView,\n        name: 'AboutView',\n    },\n    {\n        path: '\/:pathMatch(.*)*', \n        component: NotFoundView,\n        name: 'NotFoundView'\n    },\n]\n})\n\nexport { router }<\/code><\/pre>\n\n\n\n
    As you can see we imported our 3 view components and declared each route within the routes array. Each object withing the array contains the path, component and name.<\/p>\n\n\n\n
    Configuring our main.js file<\/h2>\n\n\n\n
    Inside the main.js file we will install router as a plugin. Therefore, we have to import the router plugin and tell our vue app to use it. For your main.js file use the following lines of code:<\/p>\n\n\n\n
    import { createApp } from 'vue'\nimport App from '.\/App.vue'\nimport { router } from '.\/router\/router'\n\ncreateApp(App).use(router).mount('#app')<\/code><\/pre>\n\n\n\n
    router-view component in App.vue<\/h2>\n\n\n\n
    Now let’s go to our App.vue file and make sure we include the <router-view \/><\/code> component, which will look at all our routes and try to match up the correct one. In other words router-view is kind of like a slot, which replaces itself – the router-view component – dynamically with the correct route or another component like our HomeView component. Your App.vue file should look somewhat similar to this:<\/p>\n\n\n\n
    <template>\n  <router-view \/>\n<\/template>\n\n<script>\n\nexport default {\n  name: 'App'\n}\n<\/script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n<\/style><\/code><\/pre>\n\n\n\n
    To check if this works start your Vue app with npm run serve<\/code> and go to http:\/\/localhost:3000 or http:\/\/localhost:8080 and try to change the url to e.g. http:\/\/localhost:8080\/about or http:\/\/localhost:8080\/thisWillCauseA404.<\/p>\n\n\n\n
    Creating a menu with the router-link component<\/h2>\n\n\n\n
    In order to create a menu, let’s create a new component MenuComponent.vue in our components directory. Instead of a link that looks like this <a href=\"\/about\"><\/code> we will use the <router-link><\/code> component. We will also give the class router-link-active<\/code> a seperate style to highlight the current section of the menu. In your MenuComponent.vue file include the following lines of code:<\/p>\n\n\n\n
    <template>\n        <!-- Menu -->\n        <nav>\n                <router-link to=\"\/\" class=\"nav-link\">\n                    Home\n                <\/router-link>\n                 | \n                <router-link to=\"\/about\" class=\"nav-link\">\n                    About\n                <\/router-link>\n        <\/nav>\n<\/template>\n\n<script>\nexport default {\n  name: 'MenuComponent'\n}\n<\/script>\n\n<style scoped>\na {\n    color: #3eaf7c;\n    text-decoration: none;\n}\nnav{\n    text-align: center;\n}\n.router-link-active {\n    text-decoration: underline;\n}\n<\/style><\/code><\/pre>\n\n\n\n
    As a last step we just have to include our MenuComponent inside our views components. Therefore, make sure to include it – below you can see an example of HomeView.vue, make sure to adapt AboutView and NotFoundView as well. <\/p>\n\n\n\n
    <template>\n    <MenuComponent \/>\n    \n    <h1>Home<\/h1>\n    <p>This is the home section<\/p>\n<\/template>\n\n<script>\nimport MenuComponent from '..\/components\/MenuComponent'\n\nexport default {\n    name: 'HomeView',\n    components: {\n        MenuComponent\n    }\n}\n<\/script>\n\n<style scoped>\n<\/style><\/code><\/pre>\n\n\n\n
    Finally you should see the menu on top. <\/p>\n","protected":false},"excerpt":{"rendered":"
    If you have been following the previous Vue.js 3 tutorials, to create a new project or the Composition and Options APIs, and now you would like to build an application with a few sections and a menu, this is the right tutorial for you. In this tutorial we will install […]<\/p>\n","protected":false},"author":1,"featured_media":256,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,48,46],"tags":[],"class_list":["post-247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js","category-vue-router","category-vue-js"],"_links":{"self":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/comments?post=247"}],"version-history":[{"count":8,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/247\/revisions"}],"predecessor-version":[{"id":255,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/posts\/247\/revisions\/255"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/media\/256"}],"wp:attachment":[{"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/media?parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/categories?post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felixaugenstein.com\/blog\/wp-json\/wp\/v2\/tags?post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}