Создание клона Nuxt Modules с помощью Nuxt 3, TailwindCSS, Storyblok и Vercel

Версия 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
Enter fullscreen mode Выйти из полноэкранного режима

Наконец, если мы обслужим сгенерированные статические HTML файлы с помощью следующей команды:

serve .output/public
Enter fullscreen mode Выйти из полноэкранного режима

*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'] // <-
})
Enter fullscreen mode Выйти из полноэкранного режима

С этого момента вы можете использовать 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

Оцените статью
Procodings.ru
Добавить комментарий