Как создавать компоненты в Nuxt.js?

@kurt 

В Nuxt.js компоненты создаются с помощью файлов .vue, которые содержат шаблон, скрипт и стили компонента. Вот простой пример создания компонента в Nuxt.js:

1. Создайте новый файл с расширением .vue в папке "components" вашего проекта.
2. Внутри файла определите шаблон компонента с помощью тега <template>. Например:

1
2
3
4
5
6

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

1. Определите свойства компонента с помощью тега <script>. Например:

1
2
3
4
5
6
7
8

<script>
export default {
  props: {
    title: String,
    content: String
  }
}
</script>

1. Добавьте стили компонента с помощью тега <style>. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<style scoped>
h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
</style>

1. Импортируйте компонент в нужном месте вашего приложения с помощью тега <script> и зарегистрируйте его как локальный компонент. Например:

1
2
3
4
5
6
7
8
9

<script>
import MyComponent from '@/components/MyComponent.vue'

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

Теперь вы можете использовать свой компонент в шаблоне других компонентов или страниц вашего приложения, например:

1
2
3
4
5

<template>
  <div>
    <my-component title="Заголовок" content="Содержание"></my-component>
  </div>
</template>