Vue Router for application hosted on static server – Dev Bay

I will show in this article how to start using Vue Router in Vue CLI project with very basic settings which will allow to host your application on normal static server (like Apache on e.g. GoDaddy).

What we want to achieve here is the following scenario:

We have our VueJS application created in Vue CLI and we want to have sub-pages via Vue Router.
We want to have a Single Page Application, with only index.html file in build package containing inside it all sub-pages. We DON’T want to have each sub-page as separate .htmlfile.
After development, write down in terminal command:
npm run build
Open your FTP client like File Zilla, go to your hosting server
Go to /dist directory in your Vue CLI project and move all files from here into your hosting server.
Open your app domain, like (example):
http://my-domain.com/
Click and navigate through your application sub-pages like on normal website.

Table of Contents

Vue Router configuration for static hosting server

Let’s first check what we need to have on the very beginning when we want to use Vue router and at the end, deploy app on a static hosting server.

Prerequisites:

Install NodeJS on your local machine: https://nodejs.org
Install Vue CLI: https://dev-bay.com/vue-cli-modify-webpack-configuration/
Install Vue Router in your project:
npm install --save vue-router

To make everything working as wished, you need to have the following Vue Router configuration in your Vue CLI project:

import { createRouter, createWebHashHistory } from 'vue-router'
import SubPage from '../views/sub-page-component.vue';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/about',
    name: 'about',
    component: About
  }, {
    path: '/sub-page',
    name: 'sub-page',
    component: SubPage
  }
]
 
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
 
export default router

Short explanation

Import all needed sources: Vue Router elements and all components from which you want to make a sub-pages

Defines roots in array with syntax:

{
    path: '/path-to-sub-page',
    name: 'sub-page-name',
    component: SubPageComponent
  }

Create Vue router by using createRouter method where you define right history mode (web hash history – which allows to navigate on static hosting server like on normal webpage without creating separated html files for each sub-page)
Export router as default export.

At the end we must edit our Vue CLI application main file where VueJS app is created and mounted to HTML element, in my case it is /src/main.jsfile. We need to import there exported Vue Router configuration and definition:

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

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

Where, of course, router is added by this statement: .use(router)

Now you can build your Vue CLI application with Vue Router via npm run build command, move all /dist files into your static hosting server via FTP client and share your application with whole world 🙂

Vue Router configuration for static hosting server

Related posts: