<template> | <template> | ||||
<div class="full-width center-content"> | |||||
<h1>Hello World wWohoo!</h1> | |||||
</div> | |||||
<div class="full-width center-content"> | |||||
<hello-component name="World" /> | |||||
</div> | |||||
</template> | </template> | ||||
<script> | |||||
import HelloComponent from './components/HelloComponent.vue' | |||||
export default { | |||||
components: { | |||||
HelloComponent | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped> | <style scoped> | ||||
.full-width { | .full-width { | ||||
width: 100%; | width: 100%; | ||||
align-items: center; | align-items: center; | ||||
} | } | ||||
</style> | </style> | ||||
<template> | |||||
<h1>Hello {{ name }}!</h1> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props: { | |||||
name: { | |||||
type: String, | |||||
required: true | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped> | |||||
h1 { color: red; } | |||||
</style> |