This repository was archived by the owner on Jan 18, 2022. It is now read-only.
This repository was archived by the owner on Jan 18, 2022. It is now read-only.
The sibling component can't be rendered #150
Closed
Description
Environment setup
rollup-plugin-vue/example/
├── heading.vue
├── Hello.vue
├── index.js
├── paragraph.vue
└── rollup.config.js
heading.vue
<template>
<h1>{{ text }}</h1>
</template>
<script>
export default {
name: "Heading",
props: {
text: String
}
};
</script>paragraph.vue
<template>
<p>{{ text }}</p>
</template>
<script>
export default {
name: "Paragraph",
props: {
text: String
}
};
</script>Hello.vue
<template>
<div class="hello">
<!-- According to https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended -->
<Heading :text="heading" />
<Paragraph :text="paragraph" />
</div>
</template>
<script>
import Heading from "./heading.vue";
import Paragraph from "./paragraph.vue";
export default {
name: "Hello",
components: {
Heading,
Paragraph
},
data() {
return {
heading: "Hello World!",
paragraph:
"Lorem ipsum dolor sit amet, ius ut nullam saperet, ornatus scaevola eum ex."
};
}
};
</script>index.js
import Hello from "./Hello.vue";
export default new Vue({
components: { Hello },
template: "<Hello />"
});rollup.config.js (modified by example/rollup.config.js)
const vue = require('../dist/rollup-plugin-vue.common.js');
const buble = require('rollup-plugin-buble');
export default {
name: 'TheVueInstance',
input: 'index.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [ vue({compileTemplate: true}), buble() ],
};Expected behavior
Use TheVueInstance.$mount('#target') in page with loaded Vue and render following structure.
<div class="hello">
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, ius ut nullam saperet, ornatus scaevola eum ex.</p>
</div>Actual behavior
<div class="hello">
<h1>Hello World!</h1>
</div>but using close tag for components in Hello.vue is ok.
Metadata
Metadata
Assignees
Labels
No labels