[Vuejs]-VueJS: Using x-template for a sub-component inside a component

by

3👍

✅

This won’t work. <script type="text/x-template" id="menu-list-template"> needs to exist in the DOM somewhere for Vue to find it, and since it is outside of the <template> section, vue-loader is going to treat it as a custom block (which will be ignored by default).

A single *.vue file is meant to contain one component only. I don’t recommend mixing x-templates with vue-loader anyway. You should put every component into a *.vue file so that it gets precompiled, that way you don’t need to bundle the vue compiler in your production build.

You can either:

  1. (Recommended) Extract the sub component into its own *.vue file and import it into the CategoryNav.vue module.
  2. You can define the sub component completely within CategoryNav.vue <script> section, but it cannot have a compiled template. You’ll have to specify the render function for it (messy).
  3. Same as #2, except you can specify the template as a string, but you will need to ship the Vue compiler in your production build. If you want to use an x-template instead of a string, then you need to make sure that the x-template <script> is in the DOM.

See this for an explanation of the Vue build files.

👤Decade Moon

0👍

You didn’t declare component name ‘menu-list‘, let’s try this:

export default {
  name: 'category-nav',
  components: {
    'menu-list': MenuList
  },
....
👤m0z4rt

Leave a comment