mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-05 21:53:56 +00:00
55 lines
906 B
Vue
Executable File
55 lines
906 B
Vue
Executable File
<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'
|
|
import vP from '~components/paragraph'
|
|
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>
|