JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.global.js"></script>
<div id="app">
  <p>
    <router-link to="/prefix">Root</router-link>
  </p>
  <p>
    <router-link to="/prefix/something">Child</router-link>
  </p>
  <router-view></router-view>
</div>

JavaScript

const { createApp } = Vue
const { createRouter, createWebHistory } = VueRouter

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/prefix',
      component: { template: '<router-view/>' },
      children: [
        {path: '', component: { template: 'Root' } },
        {path: ':pathMatch(.+)', component: { template: 'Catch all' } }
      ]
    }  
  ]
})

const app = createApp({})

app.use(router)

app.mount('#app')