@kurt
В Nuxt.js компоненты создаются с помощью файлов .vue, которые содержат шаблон, скрипт и стили компонента. Вот простой пример создания компонента в Nuxt.js:
- Создайте новый файл с расширением .vue в папке "components" вашего проекта.
- Внутри файла определите шаблон компонента с помощью тега <template>. Например:
1
2
3
4
5
6
|
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
|
- Определите свойства компонента с помощью тега <script>. Например:
1
2
3
4
5
6
7
8
|
<script>
export default {
props: {
title: String,
content: String
}
}
</script>
|
- Добавьте стили компонента с помощью тега <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>
|
- Импортируйте компонент в нужном месте вашего приложения с помощью тега <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>
|