Vuejs nested components with built-in template

Question

As a result, I will have many different components nested for each page. I have a component for every page in my application. Each page has different Vue instances that will reuse the components that I made, such as a slider, tabber, carousel, etc.

I am trying to restructure this, since many Vue instances interfered with each other, and I realized that I should have only one main Vue instance with a lot of internal components.

This is what I installed so far:

http://jsfiddle.net/jmtg5r4s/

The problem is that it stops after loading the home view component. It will not load any nested components if I do not have a set of templates for them that I do not want to do, because I want to use the Laravel blade syntax and not use regular HTML. Plus all my server assistants, etc.

JavaScript:

var App = new Vue({ el: '#app', attached: function() { console.log('main app loaded'); }, components: { 'home-view': { attached: function() { console.log('home view loaded'); }, components: { 'home-slider': { attached: function() { console.log('homepage slider loaded'); }, components: { 'slider': { template: '#slider-template', replace: true, attached: function() { console.log('general slider component loaded'); }, components: { 'slide': { template: '#slide-template', replace: true, props: ['index', 'text'], attached: function() { console.log('general slide component loaded'); } } } } } } } } } }); 

HTML:

 <script type="x-template" id="slider-template"> <div class="slider"> <content></content> </div> </script> <script type="x-template" id="slide-template"> <div class="slide" id="slide{{ index }}"> {{ text }} </div> </script> <div id="app"> <component is="home-view"> <div id="slideshow" v-component="slider" inline-template> <slider> <slide index="1" text="Slide #1"></slide> <slide index="2" text="Slide #2"></slide> </slider> </div> <p>More content specific to the homepage here.</p> </component> </div> 

I can overdo it, but thanks for any help / ideas!

Answer 1

I had a similar problem. You can solve this problem by adding the "built-in template" attribute to your home view component:

 <div id="app"> <component inline-template is="home-view"> <div id="slideshow" v-component="slider" inline-template> <slider> <slide index="1" text="Slide #1"></slide> <slide index="2" text="Slide #2"></slide> </slider> </div> <p>More content specific to the homepage here.</p> </component> 

A component of the innerHTML component is considered a component template if it uses the inline-template attribute.

Link to Vue.js docs

Answer 2

You mix the concept of a template for a component with existing content that may exist in the component at compilation. In AngularJS, this is called "switching." In Vue, it is called "Content Insertion", and you can read about it here:

http://vuejs.org/guide/components.html#Content_Insertion

Basically, you need to use the Content Insertion methods to get the effect of reusing the content present in the component when it is compiled. Otherwise, the component assumes that all its contents come from its template.