nuxt-seo-kit から @nuxtseo/module へ移行する

• Nuxt SEO

パッケージの削除と追加

$ pnpm remove nuxt-seo-kit
$ pnpm add -D @nuxtseo/module

export default defineNuxtConfig({
  // extends: ['nuxt-seo-kit'],
  modules: ['@nuxtseo/module'],
  ...
})

サイト構成の変更

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://hiratake.dev',
      // siteName: 'Hiratake Web',
      // siteDescription: 'ひらたけの個人ウェブサイトです。',
      // language: 'ja',
      // trailingSlash: true,
    },
  },
  site: {
    url: 'https://hiratake.dev',
    name: 'Hiratake Web',
    description: 'ひらたけの個人ウェブサイトです。',
    defaultLocale: 'ja',
    trailingSlash: true,
    identity: {
      type: 'Person',
    },
    twitter: '@Hirotaisou2012',
  },
})

export const useWebsite = () => {
  // const config = useRuntimeConfig()
  const site = useSiteConfig()
  const app = useAppConfig()

  return computed(() => ({
    site: {
      // url: config.public.siteUrl,
      // name: config.public.siteName,
      // description: config.public.siteDescription,
      url: site.url,
      name: site.name,
      description: site.description,
    },
    author: app.author,
    ...
  }))
}

Vue ファイルの変更

<template>
  <!-- <SeoKit /> -->
  <NuxtPage />
</template>

動かしてみる