- All vue components will work in nuxt
- Unlike regular vue, you do not need to import child components into other components that is handled by the config
- Use props and slots to render content in a component
- Documentation
- Props are used to pass information from a parent to a child component
- Set up props in the script tag like this:
- if a value is required, set a
required: true
<script setup>
const props = defineProps({
stringProp: {
type: String,
default: 'default values',
required: true
},
objectProp: {
type: Object,
default() {
return {
imagePath: require(`../assets/images/image1.jpg),
altText: 'description'
}
}
}
})
</script>
- Use them in a template like this:
<template>
<article>
<h1>{{ props.stringProp.key1 }}</h1>
<img :url="props.Objectprop.imagePath" :alt="altText">
</article>
</template>
-
Slots are used to create spaces where you can add content within the component
-
They can be named and created dynamically to allow for multiple slots to be used
-
See this simple slot example:
- component:
BaseHeader.vue:
<template> <!-- style your header here --> <header> <slot></slot> </header> </template>- page:
index.vue
<template> <div id="app"> <base-header> <h1>Page Title</h1> </base-header> </div> </template> - component:
-
However you can get more complex with them by using named slots:
- component:
BaseArticle.vue<template> <article> <header> <slot name="header"></slot> </header> <section> <slot name="content"></slot> </section> </article> </template> - then use the component on a page like so
<template> <base-article> <template v-slot:header> <!-- write html --> </template> <template v-slot:content> <!-- write html --> </template> </base-article> </template> - component: