How to statically insert a Slice on a page?

Developing with Prismic
, ,
1

Describe your question/issue in detail

I'm creating a cms managed side for my friend using prismic. So far everything went smooth. But now I'd like to statically insert a component I have available as a slice already. Is there a way for me to achieve this?

I'm rather new with nuxt and vue in general since I only ever started using it together with exactly this project.

I'm thinking it might be possible to just extract this slice into a component and use that component statically where needed aswell as dynamically in the slice. Could someone confirm my thought?

Your Role

Developer

Hosting provider

nuxthub

Package.json file

{
	"name": "nuxt-starter-prismic-minimal",
	"version": "0.0.0",
	"private": true,
	"license": "Apache-2.0",
	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
	"scripts": {
		"dev": "concurrently \"pnpm:nuxt:dev\" \"pnpm:slicemachine\" --names \"nuxt,slicemachine\" --prefix-colors green,magenta",
		"nuxt:dev": "nuxt dev",
		"build": "nuxt build",
		"generate": "nuxt generate",
		"preview": "nuxt preview",
		"postinstall": "nuxt prepare",
		"slicemachine": "start-slicemachine",
		"lint": "eslint ."
	},
	"devDependencies": {
		"@eslint/eslintrc": "^3.2.0",
		"@eslint/js": "^9.16.0",
		"@nuxt/devtools": "^1.6.4",
		"@nuxt/eslint-config": "^0.7.3",
		"@nuxt/fonts": "0.10.3",
		"@nuxt/icon": "^1.10.1",
		"@nuxt/image": "1.8.1",
		"@nuxthub/core": "^0.8.8",
		"@nuxtjs/prismic": "^3.4.6",
		"@slicemachine/adapter-nuxt": "^0.3.60",
		"concurrently": "^9.1.0",
		"eslint": "^9.16.0",
		"nuxt": "^3.14.1592",
		"prettier": "latest",
		"sass": "^1.83.0",
		"slice-machine-ui": "^2.11.0",
		"vue-tsc": "^2.1.10",
		"wrangler": "^3.95.0"
	},
	"peerDependencies": {
		"meow": "^9.0.0"
	}
}
2

Hi @prismic.credit866,

Welcome to the community :slight_smile:

Can you elaborate a little bit on what you mean by "statically insert a component that you have as a slice already"? Do you mean that it remains static on the page, or that it would be "pinned" on the page (at a top for example), or something else?

3

What I mean is this:
Initially I've made a slice that were supposed to be inserted by my designer on the pages they like it to have (a hero element).
Now the circumstances have changed and my designer wants to have this hero section in every page (it's a dynamic page with route params). And since I already have the slice I thought I might be able to just take that and put into [id].vue. So we don't need to go after each page manually.
Or is there a way to edit dynamic pages in bulk so that we can add the slice to all dynamic pages of type x with parameters taken from the already present slices?

Either way for now I've worked around it by extracting the contents of my slice, making it a component with props and just feeding the slice props into that component or the static props where needed.

:slight_smile: