@slicemachine/adapter-nuxt2 - v0.3

@slicemachine/adapter-nuxt2 adds support for Nuxt 2 in Slice Machine.

Dependencies and requirements

This package works in a Nuxt 2 project with slice-machine-ui installed.

Installation

The best way to configure a project with Slice Machine is by running the following command in a Nuxt project. This command will install @slicemachine/adapter-nuxt2 along with other Prismic packages and add Prismic-specific configurations to your project.

Copy

npx @slicemachine/init@latest

For more information on configuring a Nuxt project with Slice Machine, see our Nuxt guide.

If you want to install this package on its own, run this command:

Copy

npm install --save-dev @slicemachine/adapter-nuxt2

Usage

To use this adapter, specify it in the adapter property of your slicemachine.config.json file:

slicemachine.config.json

Copy

{
  "repositoryName": "example-prismic-repository",
  "adapter": "@slicemachine/adapter-nuxt2",
  "libraries": ["./slices"],
  "localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
}

You can also specify options for the adapter:

slicemachine.config.json

Copy

{
  "repositoryName": "example-prismic-repo",
  "adapter": {
    "resolve": "@slicemachine/adapter-nuxt2",
    "options": {
      "lazyLoadSlices": true
    }
  },
  "libraries": ["./slices"]
}

Here are the available options:

format

boolean

Determines if generated files should be formatted using Prettier (default: true).

lazyLoadSlices

boolean

Determines if slice index files should lazy load slice components using defineAsyncComponent (default: true).

typescript

boolean

Determines if generated files should use TypeScript rather than JavaScript (default: true only if the project contains a tsconfig.json file, otherwise false).

In order to simulate slices in Slice Machine, the adapter requires a page that returns the <SliceSimulator> component from @slicemachine/adapter-nuxt. The URL for this page should be specified in the localSliceSimulatorURL property of slicemachine.config.json.

pages/slice-simulator.js

Copy

<template>
	<SliceSimulator v-slot="{ slices }">
		<SliceZone :slices="slices" :components="components" />
	</SliceSimulator>
</template>

<script>
import { SliceSimulator } from "@slicemachine/adapter-nuxt2/dist/simulator.cjs";
import { components } from "~/slices";

export default {
	components: {
		SliceSimulator,
	},
	data () {
		return { components };
	},
};
</script>

Can't find what you're looking for?

Need technical Support? Spot an error in the documentation? Get in touch with us on our Community Forum.