Possible template injection in vue-router like angular-ui-router

Question

I started to use Vue.js, alternatively to AngularJS, and I got a question on vue-router compared to angular-ui-router.

Every angular-ui-router user knows that something like this:

$stateProvider
      .state('myState', {
        url: '/my/url',
        templateUrl: 'my/template/path/template.html',
        controller: 'myTemplateController',
        controllerAs: 'myAsController'
      });

is (maybe?) one of the good way to use the uiRouter.

When I first got in touch with uiRouter I felt very comfortable on using it.

Now that I'm using vue-router, I wonder if it can handle something like the templateUrl attribute (I don't care about other attributes that, of course, may have no more sense with Vue.js) without every time write HTML code inside .js files (that's pretty ugly) but abstract it inside a partial view.

I'm asking this because in the official documentation every example is declared like:

const routes = [
    {
        path: '/my/url',
        component: {
            template: '<tag>html here or text or sth else...</tag>'
        }
    }
];

const router = new VueRouter({routes});
const app = new Vue({router}).$mount('#myApp');

and it's clear, well explained and works perfectly. But it's not what I'm looking for.

Searching first on Stackoverflow I got on my hands this thread which inside (maybe?) what I'm asking but I still cannot understand what is doing.

tony19 · Accepted Answer · 2022-07-15 23:09:00Z

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

edited Jul 15, 2022 at 23:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 13, 2017 at 13:11

Srinivas Damam

3,0652 gold badges20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WilomGfx Over a year ago

Just make sure you have something to transpile the .vue file. Vue-loader for webpack, vueify for browserify, etc.

Andrea Grimandi Over a year ago

I see that .vue files are similar to html. Can .vue files be treated as .html or .vue is a specific key needed by Vue.js framework?

tony19 · Accepted Answer · 2022-07-16 04:12:09Z

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')
}

edited Jul 16, 2022 at 4:12

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 13, 2017 at 13:23

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Collectives™ on Stack Overflow

Possible template injection in vue-router like angular-ui-router

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related