Nuxt/examples/nested-components/pages/index.vue

55 lines
918 B
Vue
Raw Normal View History

2016-11-07 01:34:58 +00:00
<template lang="html">
<div class="main">
<post title="My first blog post">
<v-p>Hello there</v-p>
<v-p>This is an example of a componentized blog post</v-p>
</post>
<v-hr/>
<post title="My second blog post">
<v-p>Hello there</v-p>
<v-p>This is another example.</v-p>
<v-p>Wa-hoo!</v-p>
</post>
<v-hr/>
<post title="The final blog post">
<v-p>C'est la fin !</v-p>
</post>
</div>
</template>
<script>
import Post from '../components/post.vue'
import vP from '../components/paragraph.vue'
const vHr = { render: (h) => h('hr', { class: 'hr' }) }
export default {
components: {
Post,
vP,
vHr
}
}
</script>
<style scoped>
.main {
margin: auto;
max-width: 420px;
padding: 10px;
}
.hr {
width: 100px;
border-width: 0;
margin: 20px auto;
text-align: center;
}
hr::before {
content: '***';
color: #ccc;
}
</style>