nuxt-strapi-blocks-renderer

Strapi CMSのブロックテキスト要素をNuxtで簡単にレンダリングします。

4Kダウンロード•44スター•v1.1.1

freb97

Nuxt Strapi Blocks Renderer

Nuxt 3 & 4 用の完全にカスタマイズ可能なモジュールで、Strapi CMS の「Blocks」リッチテキストエディター要素をレンダリングします。

この実装は、StrapiのBlocks React Rendererに基づいています。

インストール

Nuxt Strapi Blocks Rendererモジュールをインストールするには、以下のコマンドを実行します。

npx nuxt@latest module add nuxt-strapi-blocks-renderer

または手動でインストール

モジュールのインストール

npm install nuxt-strapi-blocks-renderer

nuxt.config.{ts|js}にモジュールを追加

export default defineNuxtConfig({
    modules: [ 'nuxt-strapi-blocks-renderer' ]
})

使用方法

テキストをレンダリングするには、StrapiBlocksTextコンポーネントを使用します。

<StrapiBlocksText :nodes="blockNodes" />

この例では、blockNodesは、Blocksリッチテキストエディター要素を使用する際にStrapiが提供するJSONレスポンスから取得されます。

<script setup lang="ts">
    import type { BlockNode } from '#strapi-blocks-renderer/types';
    import type { Restaurant } from '~/types';

    const route = useRoute();
    const { findOne } = useStrapi();

    // Fetch restaurants data from Strapi
    const response = await findOne<Restaurant>('restaurants', route.params.id);
    
    // Obtain blocks text nodes from description field
    const blockNodes: BlockNode[] = response.data.attributes.description;
</script>

<template>
    <!-- Render blocks text -->
    <StrapiBlocksText :nodes="blockNodes" />
</template>

useStrapiコンポーザブルを使用するには、Strapi Nuxtモジュールをインストールしてください。

高度な使用法

プロジェクトが<a>、<p>などの特定のHTMLタグに特定のスタイリングや動作を必要とする場合、Nuxt Strapi Blocks Rendererが使用するデフォルトのレンダリングコンポーネントを上書きできます。この柔軟性により、プロジェクト固有のデザインや機能要件に合わせてレンダリングを調整できます。

グローバルコンポーネントの登録

まず、コンポーネントがNuxtアプリにグローバルに登録されていることを確認してください。このステップは、カスタムコンポーネントがレンダラーによって認識され、使用されるために不可欠です。

Nuxt設定ファイル（nuxt.config.{js|ts}）に以下を追加します。

export default defineNuxtConfig({
    components: {
        dirs: [
            {
                path: '~/components/blocks',
                pathPrefix: false,
                global: true,
            },
            // also include ~/components to ensure other local components are resolved properly
            '~/components'
        ],
    },
})

!重要
~/componentsをdirs配列に含めることが重要です。これを省略すると、ローカルスコープのコンポーネント（~/components/blocks以外）が正しく解決されない可能性があります。

段落タグのカスタマイズ

段落（<p>）タグのレンダリングをカスタマイズするには、対応するVueコンポーネントを作成する必要があります。コンポーネント名は、定義済みのパターン'StrapiBlocksText' + [NodeName] + 'Node.vue'に従います。デフォルトの段落タグを上書きするには、StrapiBlocksTextParagraphNode.vueというファイルを作成します。

<!-- components/blocks/StrapiBlocksTextParagraphNode.vue -->
<template>
    <p class="my-custom-class-for-p">
        <slot />
    </p>
</template>

このコンポーネントは、段落タグにカスタムクラスmy-custom-class-for-pを割り当て、必要に応じてスタイルを設定できます。

カスタムコンポーネントのプレフィックスは、nuxt.config.{js|ts}で調整できます。

export default defineNuxtConfig({
    strapiBlocksRenderer: {
        prefix: 'MyCustomPrefix',
        blocksPrefix: 'MyCustomBlocksPrefix',
    },
})

この設定により、StrapiBlocksTextコンポーネントはMyCustomPrefixStrapiBlocksTextとなり、カスタム段落ノードコンポーネントはMyCustomBlocksPrefixParagraphNodeという名前になります。

その他のカスタムタグ

レンダラーが使用する他のすべてのHTMLタグにも同様のカスタマイズを適用できます。

見出し

カスタム見出しタグ (<h1>, <h2>, <h3> など)

<!-- components/blocks/StrapiBlocksTextHeading1Node.vue -->
<template>
    <h1 class="my-custom-class-for-h1">
        <slot />
    </h1>
</template>

<!-- components/blocks/StrapiBlocksTextHeading2Node.vue -->
<template>
    <h2 class="my-custom-class-for-h2">
        <slot />
    </h2>
</template>

このパターンは、h3、h4、h5、h6タグにも適用されます。

リスト

カスタムリストタグ (<ol>, <ul> および <li>)

<!-- components/blocks/StrapiBlocksTextOrderedListNode.vue -->
<template>
    <ol class="my-custom-class-for-ol">
        <slot />
    </ol>
</template>

<!-- components/blocks/StrapiBlocksTextUnorderedListNode.vue -->
<template>
    <ul class="my-custom-class-for-ul">
        <slot />
    </ul>
</template>

<!-- components/blocks/StrapiBlocksTextListItemInlineNode.vue -->
<template>
    <li class="my-custom-class-for-li">
        <slot />
    </li>
</template>

引用ブロックとコード

カスタム引用ブロックとコードタグ (<blockquote>, <pre>)

<!-- components/blocks/StrapiBlocksTextQuoteNode.vue -->
<template>
    <blockquote class="my-custom-class-for-blockquote">
        <slot />
    </blockquote>
</template>

<!-- components/blocks/StrapiBlocksTextCodeNode.vue -->
<script setup lang="ts">
const props = defineProps<{
    language?: string;
}>();
</script>

<template>
    <pre class="my-custom-class-for-pre"><slot /></pre>
</template>

インラインテキストノード

カスタムインラインテキストノード (<strong>, <em>, <u>, <del>, <code>)

<!-- components/blocks/StrapiBlocksTextBoldInlineNode.vue -->
<template>
    <strong class="my-custom-class-for-strong">
        <slot />
    </strong>
</template>

<!-- components/blocks/StrapiBlocksTextItalicInlineNode -->
<template>
    <em class="my-custom-class-for-em">
        <slot />
    </em>
</template>

<!-- components/blocks/StrapiBlocksTextUnderlineInlineNode -->
<template>
    <u class="my-custom-class-for-u">
        <slot />
    </u>
</template>

<!-- components/blocks/StrapiBlocksTextStrikethroughInlineNode -->
<template>
    <del class="my-custom-class-for-del">
        <slot />
    </del>
</template>

<!-- components/blocks/StrapiBlocksTextCodeInlineNode.vue -->
<template>
    <code class="my-custom-class-for-code">
        <slot />
    </code>
</template>

リンク

カスタムリンクタグ (<a>)

<!-- components/blocks/StrapiBlocksTextLinkInlineNode.vue -->
<script setup lang="ts">
    const props = defineProps<{
        url: string;
    }>();
</script>

<template>
    <a :href="props.url" class="my-custom-class-for-a">
        <slot />
    </a>
</template>

リンクタグをレンダリングするとき、URLはurlコンポーネントプロパティとして渡されます。

画像

カスタム画像タグ (<img>)

<!-- components/blocks/StrapiBlocksTextImageNode.vue -->
<script setup lang="ts">
    const props = defineProps<{
        image: any;
    }>();
</script>

<template>
    <img
        class="my-custom-class-for-img"
        :src="props.image.url"
        :alt="props.image.alternativeText"
        :width="props.image.width"
        :height="props.image.height"
    >
</template>