Dead simple Vue.js router example 3

 in Javascript  tagged javascript / router / static site / vue.js by

I have been working on a simple framework to put a website online for a friend. The premise are simple:

  • No backend language available. No scripting.
  • No database, here we go static site.
  • Some idea of organization and structure, with separated pages. This means multiple page rendering, home/news/content1/about/contact.
  • Common header and footer for all the site and avoid repetition.
  • Don’t over complicate it: no node/npm.

I could have gone for bare html and iframes, but there are so many simpler toys around that I have decided once again to go for Vue.js.

Vue.js is an amazing tool, really flexible and easy to use. It comes with a core library and several other features. One that I wanted to use for a while was the Vue.js router.

So, here is how to render a website with several pages, with Javascript only and a pretty nice structure.

Structure

index.html
js/index.js
js/vue.min.js
js/vue-router.js
js/httpVueLoader.js
js/pages/home.vue
js/pages/news.vue
js/pages/content1.vue
js/pages/links.vue
js/pages/contact.vue

Index.html/app

Build an index.html, load vue.js, its router and httpVueLoader.js (we will come back on this one later) in the header and our custom javascript index in the footer. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="css/styles.css" rel="stylesheet">
    <script src="./js/vue.min.js"></script>
    <script src="./js/vue-router.js"></script>
    <script src="./js/httpVueLoader.js"></script>
</head>

<body>
<div id="app">
<header>
    <div class="aComonHeader">
                <ul>
                <li class="menu-item"><router-link to="/home">Home</router-link></li>
                <li class="menu-item"><router-link to="/news">News</router-link></li>
                <li class="menu-item"><router-link to="/content1">Content1</router-link></li>
                <li class="menu-item"><router-link to="/links">Links</router-link></li>
                <li class="menu-item"><router-link to="/contact">Contact</router-link></li>

            </ul>
    </div>
</header>

<main role="main" class="main">
    <router-view></router-view>
</main>

<footer>
    a nice footer
</footer>
<script src="./js/index.js"></script>
</div>
</body>
</html>

Index.js/router

Then we need to initiate the router. This will do the trick in index.js. You can use Components inline templates or with httpVueLoader you can load component from pages without getting the Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: …/pages/home.vue

// 1. Import the route components
const Home = { template: '<div>foo</div>' }; // inline template
//const Home = import('./pages/home.vue'); // this won't work, use httpVueLoader
const News = httpVueLoader('./pages/news.vue');
const Content1 = httpVueLoader('./pages/content1.vue');
const Links = httpVueLoader('./pages/links.vue');
const Contact = httpVueLoader('./pages/contact.vue');

// 2. Define some routes
const routes = [
    { path: '/', component: Home },
    { path: '/home', component: Home },
    { path: '/news', component: News },
    { path: '/content1', component: Content1 },
    { path: '/links', component: Links },
    { path: '/contact', component: Contact }
];

// 3. Create the router instance and pass the `routes` option
const router = new VueRouter({
    routes: routes, // short for `routes: routes`
    default: Home
});

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
    router: router
}).$mount('#app');

// Now the app has started!

Pages.vue/Content

Then drop you pages in pages/page.vue and add some html code inside.

<template>
    <div class="container">
        Boo!
    </div>
</template>

Then clicks the links in the menu header and the content of your pages.vue should appear in <router-view></router-view>

Fab
Latest posts by Fab (see all)

About Fab

Solutions Architect, I build great workflows for the news, media and broadcast industries. I play with data too.

Leave a comment

Your email address will not be published. Required fields are marked *

3 thoughts on “Dead simple Vue.js router example”