Press "Enter" to skip to content

Vue Router for application hosted on static server

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:

  1. We have our VueJS application created in Vue CLI and we want to have sub-pages via Vue Router.
  2. 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.
  3. After development, write down in terminal command:
    npm run build
  4. Open your FTP client like File Zilla, go to your hosting server
  5. Go to /dist directory in your Vue CLI project and move all files from here into your hosting server.
  6. Open your app domain, like (example):
    http://my-domain.com/
  7. Click and navigate through your application sub-pages like on normal website.

Prerequisites:

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

 

To make everything working as wished, you need to have the following code 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

  1. Import all needed sources: Vue Router elements and all components from which you want to make a sub-pages
  2. Defines roots in array with syntax:
    {
        path: '/path-to-sub-page',
        name: 'sub-page-name',
        component: SubPageComponent
      }
    
  3. Create 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)
  4. 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 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 and build your application via npm run build command, move all /dist files into your server via FTP client and share your application with whole world 🙂