Версия Release Candidate Nuxt 3 появилась из ниоткуда! Официальный релиз несколько раз переносился, но наконец-то мы его получили, поэтому было бы здорово поглубже погрузиться в то, что он привнесет в экосистему Nuxt. Именно это мы с @alvarosabu и сделали во время нашего последнего видео-сотрудничества, которое я настоятельно рекомендую вам посмотреть по ссылке ниже:
В этой статье я подытожу каждый шаг, который мы сделали в видео, с письменными примерами и пошаговым руководством. Наслаждайтесь!
Если вы в какой-то момент заблудитесь, вы всегда можете заглянуть в следующий репозиторий github:
https://github.com/alvarosabu/nuxt-modules-clone
Nuxt 3
Первым шагом будет создание нового проекта:
npx nuxi init nuxt-modules-clone
Это сгенерирует проект Nuxt 3 по умолчанию. Давайте попробуем протестировать новейшее дополнение к экосистеме — поддержку Static Site Generation. В nuxt.config.ts добавьте следующую строку:
export default defineNuxtConfig({
ssr: false, // <-
})
Теперь давайте соберем проект с помощью следующей команды:
yarn generate
Наконец, если мы обслужим сгенерированные статические HTML файлы с помощью следующей команды:
serve .output/public
*serve — это дополнение к VS Code, которое позволяет обслуживать статические файлы с локального сервера.
Теперь мы должны увидеть тот же результат, что и при использовании yarn dev в broweser. Потрясающе!
TailwindCSS
Теперь мы знаем, как генерировать статическую HTML-страницу. Теперь давайте добавим в нее немного стилей, чтобы она выглядела немного лучше. Мы установим TailwindCSS с помощью официального модуля Nuxt и придадим стиль некоторым частям приложения.
Установка модуля относительно проста. Просто выполните следующую команду:
yarn add --dev @nuxtjs/tailwindcss
И зарегистрируйте модуль в nuxt.config.ts в массиве modules:
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss'] // <-
})
С этого момента вы можете использовать TailwindCSS во всем вашем приложении. Мы создадим компонент TheHeader.vue с помощью официального метода Nuxt 3 CLI:
npx nuxi add component TheHeader
И добавим в него немного стилизации:
<script lang="ts" setup></script>
<template>
<header class="bg-white py-4 shadow-lg">
<div class="container mx-auto">
<a href="" class="flex items-center"> <img class="h-8 w-8 mr-4" src="/logo.svg" /> Nuxt Module</a>
</div>
</header>
</template>
<style scoped></style>
Внутри /public/logo.svg добавьте следующий код svg:
<svg width="40" height="40" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Nuxt"><path d="M31.4918 17.1505C29.8172 14.2712 25.6308 14.2712 23.9562 17.1505L5.70589 48.5305C4.03131 51.4099 6.12453 55.009 9.4737 55.009H23.7209C22.2898 53.7583 21.7598 51.5946 22.8428 49.7382L36.6648 26.0451L31.4918 17.1505Z" fill="#80EEC0"></path><path d="M43.0556 24.0338C44.4415 21.678 47.9061 21.678 49.292 24.0338L64.3957 49.7083C65.7816 52.0641 64.0493 55.0089 61.2775 55.0089H31.0701C28.2984 55.0089 26.566 52.0641 27.9519 49.7083L43.0556 24.0338Z" fill="#00DC82"></path></svg>
Наконец, мы можем использовать наш новый компонент TheHeader внутри нашего app.vue.
<template>
<TheHeader />
</template>
Storyblok
Для добавления контента на нашу страницу мы будем использовать CMS Storyblok.
Давайте установим необходимые зависимости, введя следующую команду:
yarn add @storyblok/vue
yarn add --dev axios
Для того чтобы Storyblok работал, мы будем использовать плагин Nuxt. Создайте файл /plugins/storyblok.ts и добавьте в него следующий код:
import {
StoryblokVue, apiPlugin
} from '@storyblok/vue';
export default defineNuxtPlugin(nuxtApp => {
const config = useRuntimeConfig().public
nuxtApp.vueApp.use(StoryblokVue, {
accessToken: config.apiToken,
use: [apiPlugin]
});
})
*Не забудьте создать файл .env с маркером доступа, полученным от Storyblok.
Давайте добавим токен storyblok в runtimeConfig:
export default defineNuxtConfig({
runtimeConfig: {
public: {
apiToken: process.env.STORYBLOK_TOKEN
}
},
})
Теперь создадим компонент ModuleCard, который мы будем использовать для отображения каждого модуля:
<script lang="ts" setup>
const props = defineProps({
name: {
type: String,
default: "Module Card"
},
description: {
type: String,
default: "Crazy description"
},
icon: {
type: Object,
default: () => ({})
},
url: {
type: Object,
default: () => ({})
}
})
</script>
<template>
<a class="flex justify-center" :href="url.url">
<div class="flex items-center p-8 flex-col md:flex-row md:max-w-xl rounded-lg bg-white shadow-lg">
<img class="w-10 h-10 object-fit" :src="icon.filename" :alt="icon.alt" />
<div class="px-8 flex flex-col justify-start">
<h5 class="text-gray-900 text-xl font-medium mb-2">{{name}}</h5>
<p class="text-gray-700 text-base mb-4">
{{description}}
</p>
</div>
</div>
</a>
</template>
<style scoped></style>
Наконец, давайте используем все ранее созданные части на нашей корневой странице app.vue:
<script setup lang="ts">
import { useStoryblokApi } from "@storyblok/vue";
const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get("cdn/stories", { version: "draft", starts_with: 'modules' });
const modules = computed(() => data.stories);
</script>
<template>
<TheHeader />
<div class="container mx-auto p-8 grid grid-cols-1 md:grid-cols-3 gap-4">
<ModuleCard v-for="module in modules" v-bind="module.content" />
</div>
</template>
Vercel
Вся конфигурация Vercel хорошо описана в видео, поэтому я просто подытожу ее.
Импорт репозитория github в Vercel
Определите правильную команду сборки:
Команда сборки должна быть yarn generate и папка вывода .output/public.
Наконец, добавьте токен Storyblok в качестве переменной окружения:
Если все прошло успешно, вы должны увидеть результат, аналогичный нашему демо https://nuxt-modules-clone.vercel.app/.
Резюме
Отлично! Вы только что создали простой клон Nuxt Modules с Nuxt 3 SSG, TailwindCSS, Storyblok и Vercel. В этой статье мы рассказали о многом, так что немного отдохните, а затем вернитесь к теме, ведь вас ждет еще много интересного!
Бонус
Ниже я размещаю несколько ссылок, которые могут быть полезны для вас:
- https://github.com/nuxt-community/algolia-module
- https://github.com/storyblok/storyblok-nuxt-beta
- https://www.storyblok.com/tp/using-storyblok-algolia-in-nuxt-3