@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>

Was this article helpful?

Not really

Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.