[Vuejs]-Possible template injection in vue-router like angular-ui-router

by

2👍

You may want to use .vue files.

Create a .vue file like this.

// template.vue file

<template>
 // html goes here...
<template>

<script>
 export default {
  name: 'myComponentName', // name of the component,
  created() {
  },
  // ...other vue instance properties
  
 }
</script>

<style scoped>
 // ...styles for the component
 // scoped means the styles are only applied to component
</style>

In the routes

import myComponent from 'path/to/your/component' // .vue file
const routes = [
    {
        path: '/my/url',
        component: myComponent
    }
];

Separating components into smaller components(.vue files) is more flexible and can be reusable and much more maintainable.
Check this documentation for creating custom components. Vue Components

👤Srinivas Damam

0👍

Vue does not support template urls, this is explained in documentation. And the reason is

Think in components, not templates.

And for the components, they can be implemented as single file components, which are handled with Vue loader during build process. This efficiently solves the problem with writing HTML inside JS files. A .vue file is separated into tagged sections

<template>...</template>
<script>...</script>

A framework-independent way is to use Webpack/Browserify plain text loaders to include file contents (can be used in Angular as well):

path: '/my/url',
component: {
    template: require('./component.html')
}
👤Estus Flask

Leave a comment