VueJS: Setup with Vite and Vue Router

Installation

$ yarn create vite

Add Vue Router

$ yarn add vue-router@4

Load Vue Router

Go to src/main.ts

If you are using example from Getting Started | Vue Router (vuejs.org), then you have to make changes from:

import { createApp } from "vue";

To:

import { createApp } from "vue/dist/vue.esm-bundler";

Otherwise, the app will not load and there is this error in the browser console.

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

Another fix is by changing the code from:

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

To:

import { h } from 'vue';
const Home = h("div", "Home");
const About = h("div", "About");

Or:

import { h } from "vue";
const Home = {
  render() {
    return h("div", "Home");
  },
};
const About = {
  render() {
    return h("div", "About");
  },
};

For more information regarding Vue render function, go to Render Functions & JSX | Vue.js (vuejs.org).