Defining vue-router components within an HTML: A Guide

After conducting an extensive search, I noticed that all the examples utilize .vue components or simply define the component templates within the JavaScript part. However, what I desire is to define the template separately from the JavaScript part. Although I attempted to achieve this, it was unsuccessful. Additionally, it is important to note that certain links within these examples should connect to internal router links.


I’m utilizing django in combination with vue.js and
.js for my project. My objective is to implement vue-router on a single html page. After conducting extensive research, I found that all the examples either utilize .vue components or define the component templates in the javascript section in a straightforward manner, like this.

Go to Foo Go to Bar

The desired outcome is to establish the template outside of the JavaScript section, similar to the following concept.

Go to Foo Go to Bar

I attempted this, but it was unsuccessful. Therefore, what is the method for defining vue-router components within an HTML file? I am new to Vue.


To include


in your html file, follow this example.

const Foo = { template: '
this is Foo
' } const Bar = { template: '
this is Bar
' } const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app')

Frequently Asked Questions