wixヘッドレスをnuxt3で試してみる。

概要

以前から気になっていたwixヘッドレス試します。(nuxt3ですがoptions apiで書きます。)

コレクションはこちらを参考にNewsコレクションを定義します。

作成したものはこちら

初期設定

sdkインストール

nuxtをインストールしたらwixにsdkがあるようなのでインストールします。

npm install @wix/api-client

npm install @wix/data-items

envファイル定義

.env

NUXT_PUBLIC_WIX_CLIENT_ID=

configファイルにenvを設定します。publicとして設定ではなく非公開で設定。

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    wixClientId:process.env.NUXT_PUBLIC_WIX_CLIENT_ID || '',
  }
})

WixClientを設定する

apiで使うので「server/utils」定義してあげる

WixClient.js

import { createClient, OAuthStrategy } from '@wix/api-client';
import { dataItems } from '@wix/data-items';

export default async () => {
  const config = useRuntimeConfig();

  const wixClient = createClient({
    modules: { dataItems },
    auth: OAuthStrategy({ clientId: config.wixClientId }),
  });

  const tokens = await wixClient.auth.generateVisitorTokens();
  wixClient.auth.setTokens(tokens);

  return wixClient;
}

apiを定義する。

serverディレクトリにnewsを取得するapiを定義します。

参考、一覧取得

all.get.js

export default defineEventHandler(async (event) => {
    const wixClient = await WixClient();

    const Items = await wixClient.dataItems.queryDataItems({
        dataCollectionId: 'News',
    }).find();    

    return (Items);
});

apiからデータを取得

index.vue

<template>
    <ul>
        <li v-for="item in items?._items" :key="item._id"><NuxtLink :to="{ path: '/news/' + item.data.slug }">{{ item.data.title }}</NuxtLink></li>
    </ul>
</template>



<script>
export default {
    data() {
        return {
            items: []
        }
    },
    async mounted() {
        this.items = await $fetch("/api/news/all");
    }
};
</script>

画像を取得するコンポーネント

WixMedia.vue

<template>
    <img :src="imageUrl" :alt="alt" :width="width" :height="height" :class="className" />
</template>

<script>
import { media as wixMedia } from '@wix/api-client';


export default {
    props: {
        media: {
            default: ""
        },
        alt: {
            default: ""
        },
        width: {
            default: 640
        },
        height: {
            default: 320
        },
        className: {
            default: ""
        },
    },
    computed: {
        imageUrl() {
            return this.media
                ? this.getImageUrlForMedia(this.media, this.width, this.height)
                : this.$PLACEHOLDER_IMAGE;
        },
    },
    
    methods: {
        getImageUrlForMedia(media, width, height) {
            if (media.startsWith('wix:image')) {
                //return wixMedia.getScaledToFillImageUrl(media, width, height, {});
                return wixMedia.getScaledToFitImageUrl(media, width, height,{});
            } else {
                return media;
            }
        }
    }
};
</script>

WiXヘッドレスのメリット

• 他のヘッドレス系のサービスと比較してECサイトやブッキング等がwix単体で作れる
• wixオートメーションを使って何かのタイミングで自動でメールを送信したりできる

感想

ECサイトやブッキングができる点が面白い所なのかなと思います。
ヘッドレスだけじゃなく、Editor Xを更に強化したエンタープライズ向けのWix Studioも発表されたのでWixの今後に注目したいです。