Nuxt Props Example

This is a small example on how to use props in nuxt

I had a big header component that needed to get data from another page. I am passing the title and description to the header component.

Put this in your component file, this is to load the props passed by it. In our example this would be ./components/AppHeader.vue

<script lang="ts">
export default {
  props: ['title', 'description'],
}
</script>

You can use this data from the template now with this

{{ title }}
{{ description }}

From the page, you want to pass the props down to the component like this. In our example this would be app.vue or pages/index.vue, depending on your setup.

<template>
<AppHeader title="My Title" description="My Description"/>
</template>

You can even dynamicly pass api responses to components, passing the data object in the prop.

by Daniel at 2023-03-22T21:39:33.462Z