Nuxt 3, TailwindCSS, Storyblok 및 Vercel을 사용하여 Nuxt Modules 클론 빌드

Nuxt 3의 릴리스 후보 버전이 갑자기 떨어졌습니다! 공식 출시 일정이 몇 번 재조정되었지만 마침내 출시되었으므로 Nuxt 생태계에 가져오는 것에 대해 더 깊이 파고드는 것이 좋을 것입니다. 이것이 바로 저와 가장 최근의 비디오 공동 작업 중에 수행한 작업입니다. 아래 링크를 통해 확인해 보시기 바랍니다.



이 기사에서는 비디오에서 취한 각 단계를 서면 예제 및 단계별 가이드와 함께 요약합니다. 즐기다!

어느 시점에서 길을 잃으면 언제든지 다음 github 저장소를 확인할 수 있습니다.

https://github.com/alvarosabu/nuxt-modules-clone

눅스트 3

첫 번째 단계는 다음을 사용하여 새 프로젝트를 생성하는 것입니다.

npx nuxi init nuxt-modules-clone

이렇게 하면 기본 Nuxt 3 프로젝트가 생성됩니다. 정적 사이트 생성을 지원하는 생태계에 대한 최신 추가 기능을 테스트해 봅시다. nuxt.config.ts에서 다음 줄을 추가합니다.

export default defineNuxtConfig({
    ssr: false,  // <-
})

이제 다음 명령을 사용하여 프로젝트를 빌드해 보겠습니다.

yarn generate

마지막으로 다음 명령을 사용하여 생성된 정적 HTML 파일을 제공하는 경우:

serve .output/public

*serve는 VS Code에 추가되어 로컬 서버에 정적 파일을 제공할 수 있습니다.

이제 브라우저에서 yarn dev와 동일한 결과를 볼 수 있습니다. 대박!

TailwindCSS

이제 정적 HTML 페이지를 생성하는 방법을 살펴보겠습니다. 이제 약간의 스타일을 추가하여 좀 더 보기 좋게 만들어 보겠습니다. 공식 Nuxt 모듈을 사용하여 TailwindCSS를 설치하고 애플리케이션의 일부를 스타일링합니다.

모듈의 설치는 비교적 간단합니다. 다음 명령을 사용하십시오.

yarn add --dev @nuxtjs/tailwindcss

모듈 배열의 nuxt.config.ts에 모듈을 등록합니다.

export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'] // <-
})

이제부터 애플리케이션 전체에서 TailwindCSS를 사용할 수 있습니다. 공식 Nuxt 3 CLI 방법을 사용하여 TheHeader.vue 구성 요소를 생성합니다.

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를 사용합니다.

다음 명령을 입력하여 필요한 종속성을 설치해 보겠습니다.

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]
    });
})

*Storyblok에서 가져온 액세스 토큰으로 .env 파일을 생성해야 합니다.

runtimeConfig에 storyblok 토큰을 추가해 보겠습니다.

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 저장소 가져오기



적절한 빌드 명령을 정의합니다.



빌드 명령은 yarn generate 및 출력 폴더.output/public여야 합니다.

마지막으로 Storyblok 토큰을 환경 변수로 추가합니다.



모든 구성이 제대로 된 경우 데모와 유사한 결과가 표시됩니다https://nuxt-modules-clone.vercel.app/.

요약

잘했어요! Nuxt 3 SSG, TailwindCSS, Storyblok 및 Vercel을 사용하여 간단한 Nuxt Modules 클론을 만들었습니다. 우리는 이 기사에서 많은 것을 다루었으므로 약간의 휴식을 취한 다음 더 많은 것을 발견할 수 있으므로 주제로 돌아가십시오!

보너스

아래에 귀하에게 유용할 수 있는 몇 가지 링크를 게시하고 있습니다.

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