What are Nuxt components and how do I use them?

What are Nuxt components and how do I use them?

Nuxt components are Vue components that can be used in your Nuxt.js applications. They help in building reusable UI elements.

Can you give me an example of a simple component?

Sure! Here's a simple button component:

<template>
  <button @click="handleClick">Click me!</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
}
</script>

How do I register this component in my Nuxt app?

You can register it globally by placing it in the components/ directory. Nuxt automatically imports components from there.

What if I want to use it only in a specific page?

You can import the component directly in your page file like this:

<template>
  <MyButton />
</template>

<script>
import MyButton from '@/components/MyButton.vue';

export default {
  components: {
    MyButton
  }
}
</script>