bun install -g prismic-cli

mkdir ~/Project/sample120
cd ~/Project/sample120

$ bunx @slicemachine/init@latest --repository sample120 --starter nuxt-starter-prismic-minimal

 Slice Machine  → Initializing
✔ Starter copied

ℹ We collect telemetry data to improve user experience.
  Learn more: https://prismic.dev/slice-machine/telemetry

✔ Detected framework Nuxt 3 and package manager npm
✔ Began core dependencies installation with npm ... (running in background)
✔ Selected repository sample120 (flag repository used)
✔ Installed core dependencies with npm
✔ Updated Slice Machine configuration and loaded adapter

Logging in to Prismic...
press any key to open the broweser to login..

✔ Logged in as rkp37980@romog.com
✔ Synced data with Prismic
✔ Initialized project (patched package.json scripts)
✔ Initialized adapter

 Slice Machine  → Initialization successful!

Continue with next steps in Slice Machine.

? Run Slice Machine (npm run slicemachine)? › (Y/n)

 Slice Machine  → Initialization successful!

Continue with next steps in Slice Machine.

├── customtypes （prismic用ディレクトリ）
├── documents （prismic用ディレクトリ）
├── LICENSE
├── node_modules
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
├── prismicio-types.d.ts （prismic用ファイル）
├── public
├── README.md
├── server
├── slicemachine.config.json （prismic用ファイル）
├── slices （prismic用ディレクトリ）
└── tsconfig.json

    modules: [
        "@nuxtjs/prismic",
    ],
    prismic: {
        endpoint: 'sample120',
        preview: '/api/preview',
        clientConfig: {
            routes: [
                {
                  type: 'page',
                  path: '/:uid',
                },
                {
                  type: 'page',
                  uid: 'home',
                  path: '/',
                },
              ]
          },
    },

$ bun run slicemachine
 start-slicemachine
 Slice Machine v1.26.0  → Running at http://localhost:9999

<script setup lang="ts">
import { type Content } from '@prismicio/client'

// The array passed to \`getSliceComponentProps\` is purely optional.
// Consider it as a visual hint for you when templating your slice.
defineProps(getSliceComponentProps<Content.RichTextSlice>(
  ['slice', 'index', 'slices', 'context']
));
</script>

<template>
  <section>
    <PrismicRichText
      :field="slice.primary.content"
      class="richtext"
    />
  </section>
</template>

<style scoped>
section:deep(.richtext) {
  max-width: 600px;
  margin: 6em auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

section:deep(.richtext .codespan) {
  font-family: monospace;
}
</style>

  namespace Content {
    export type {
      PageDocument,
      PageDocumentData,
      PageDocumentDataSlicesSlice,

type PageDocumentDataSlicesSlice = RichTextSlice;

/**
 * Content for Page documents
 */
interface PageDocumentData {
  /**
   * Title field in *Page*
   *
   * - **Field Type**: Title
   * - **Placeholder**: *None*
   * - **API ID Path**: page.title
   * - **Tab**: Main
   * - **Documentation**: https://prismic.io/docs/field#rich-text-title
   */
  title: prismic.TitleField;

  /**
   * Slice Zone field in *Page*
   *
   * - **Field Type**: Slice Zone
   * - **Placeholder**: *None*
   * - **API ID Path**: page.slices[]
   * - **Tab**: Main
   * - **Documentation**: https://prismic.io/docs/field#slices
   */
  slices: prismic.SliceZone<PageDocumentDataSlicesSlice>;
}

/**
 * Page document from Prismic
 *
 * - **API ID**: `page`
 * - **Repeatable**: `true`
 * - **Documentation**: https://prismic.io/docs/custom-types
 *
 * @typeParam Lang - Language API ID of the document.
 */
export type PageDocument<Lang extends string = string> =
  prismic.PrismicDocumentWithUID<Simplify<PageDocumentData>, "page", Lang>;

{
  "id": "page",
  "label": "Page",
  "format": "page",
  "repeatable": true,
  "status": true,
  "json": {
    "Main": {
      "uid": { "type": "UID", "config": { "label": "UID", "placeholder": "" } },
      "title": {
        "type": "StructuredText",
        "config": {
          "label": "Title",
          "placeholder": "",
          "allowTargetBlank": true,
          "single": "heading1"
        }
      },
      "slices": {
        "type": "Slices",
        "fieldset": "Slice Zone",
        "config": { "choices": { "rich_text": { "type": "SharedSlice" } } }
      }
    }
  }
}

<script setup lang="ts">
import { components } from '~/slices'

const prismic = usePrismic()
const { data: page } = useAsyncData('index', () =>
  prismic.client.getByUID('page', 'home')
)

useHead({
  title: prismic.asText(page.value?.data.title)
})
</script>


<template>
  <SliceZone
    wrapper="main"
    :slices="page?.data.slices ?? []"
    :components="components"
  />
</template>

<script setup lang="ts">
import { components } from '~/slices'

const prismic = usePrismic()
const route = useRoute()
const { data: page } = useAsyncData(route.params.uid as string, () =>
  prismic.client.getByUID('page', route.params.uid as string)
)

useHead({
  title: prismic.asText(page.value?.data.title)
})
</script>


<template>
  <SliceZone
    wrapper="main"
    :slices="page?.data.slices ?? []"
    :components="components"
  />
</template>

  "scripts": {
    "dev": "concurrently \"npm:nuxt:dev\" \"npm:slicemachine\" --names \"nuxt,slicemachine\" --prefix-colors green,magenta",
    "nuxt:dev": "nuxt dev",
    "slicemachine": "start-slicemachine",

$ bun run dev

$ concurrently "npm:nuxt:dev" "npm:slicemachine" --names "nuxt,slicemachine" --prefix-colors green,magenta
[slicemachine] 
[slicemachine] > nuxt-starter-prismic-minimal@0.0.0 slicemachine
[slicemachine] > start-slicemachine
[slicemachine] 
[nuxt] 
[nuxt] > nuxt-starter-prismic-minimal@0.0.0 nuxt:dev
[nuxt] > nuxt dev
[nuxt] 
[nuxt] Nuxt 3.11.1 with Nitro 2.9.5
[nuxt] 
[nuxt]   ➜ Local:    http://localhost:3000/
[nuxt]   ➜ Network:  use --host to expose
[nuxt] 
[nuxt] [nuxt:prismic] ℹ Using default preview page, available at /api/preview
[nuxt]   ➜ DevTools: press Shift + Alt + D in the browser (v1.1.4)
[nuxt] 
[slicemachine] 
[slicemachine]  Slice Machine v1.26.0  → Running at http://localhost:9999
[slicemachine] 
[nuxt] ℹ Vite server warmed up in 1914ms
[nuxt] ℹ ✨ new dependencies optimized: @slicemachine/adapter-nuxt/simulator, @unhead/vue, @prismicio/client
[nuxt] ℹ ✨ optimized dependencies changed. reloading
[nuxt] ℹ Vite client warmed up in 2374ms
[nuxt] [nitro] ✔ Nuxt Nitro server built in 722 ms

{
  "id": "navigation",
  "label": "Navigation",
  "format": "custom",
  "repeatable": false,
  "status": true,
  "json": {
    "Main": {
      "links": {
        "type": "Group",
        "config": {
          "label": "Links",
          "fields": {
            "label": {
              "type": "StructuredText",
              "config": {
                "label": "Label",
                "placeholder": "Optional - Label for the link",
                "allowTargetBlank": false,
                "single": "heading3"
              }
            },
            "link": {
              "type": "Link",
              "config": {
                "label": "Link",
                "placeholder": "Link for navigation item",
                "select": null
              }
            }
          }
        }
      }
    }
  }
}

export const useNavigation = () => {
  const prismic = usePrismic()
  return useAsyncData('$navigation', () => prismic.client.getSingle('navigation')).data
}

<script setup lang="ts">
const navigation = useNavigation()
</script>

<template>
  <Bounded
    as="header"
    y-padding="sm"
  >
    <div
      class="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-3 leading-none"
    >
      <nav>
        <ul
          class="flex flex-wrap gap-6 md:gap-10"
        >
          <li
            v-for="item in navigation?.data.links"
            :key="$prismic.asText(item.label) || ''"
            class="font-semibold tracking-tight text-slate-800"
          >
            <PrismicLink
              :field="item.link"
            >
              {{
                $prismic.asText(item.label)
              }}
            </PrismicLink>
          </li>
        </ul>
      </nav>
    </div>
  </Bounded>
</template>