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

Пользователь

от kurt , в категории: JavaScript , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от laney_johnson , 2 года назад

@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>