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

55 lines
923 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 />
2016-11-07 01:34:58 +00:00
<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 />
2016-11-07 01:34:58 +00:00
<post title="The final blog post">
<v-p>C'est la fin !</v-p>
</post>
</div>
</template>
<script>
2017-07-08 18:01:57 +00:00
import Post from '~/components/post'
import vP from '~/components/paragraph'
const vHr = { render: h => h('hr', { class: 'hr' }) }
2016-11-07 01:34:58 +00:00
export default {
components: {
Post,
'v-p': vP,
'v-hr': vHr
2016-11-07 01:34:58 +00:00
}
}
</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>