Edit 1: With adjusting instructions on naming to follow new advice below
Iâm in the same boat, without this being resolved Slices are basically useless.
I created my project following your slicemachine.dev nuxt tutorials and the site is working fine.
I followed this workflow:
Open Prismic Web Interface
- Open Prismic.io and for my content type (âpostâ), and clicked Add Slice.
- Named my new Slice âShare Printâ (2 words with a space)
How much does it matter what I name the slice here?
The prismic-cli asks for 2 words, Pascal Case.
Do I need to match that naming convention here⊠the other default slices here have spaces in their names?
Edit 1: Make this a space and it will correctly create the JSON with snake_case.
- Then add custom fields to the slice by dragging things in with the UI tools
This slice has no custom fields, but I expect Id add them in this step.
- Now my slice json is up-to-date as per the JSON editor.
Open Terminal
-
Run command to create slice code
$ npx prismic-cli sm --create-slice # I named the slice âSharePrintâ
Which created these files in my code:
index.vue
<template>
<section class="section">
<prismic-rich-text v-if="slice.primary.title" :field="slice.primary.title" />
<h1 v-else>SharePrint</h1>
<p>
Hey I'm your new slice đI've been generated by SliceMachine.
<br/>
Feel free to make me yours by updating my code âïž
</p>
<p v-if="endpoint">
Or pass me props <a target="_blank" :href="endpoint">in your writing room</a>
</p>
</section>
</template>
<script>
export default {
props: ['slice'],
computed: {
endpoint() {
return this.$prismic && this.$prismic.apiEndpoint
? this.$prismic.apiEndpoint.split('/').slice(0, -2).join('/').replace('cdn.', '')
: null
}
}
}
</script>
<style scoped>
.section {
position: relative;
background: #FFFF63;
color: #111;
padding: 4em;
text-align: center;
}
a {
color: #111;
}
</style>
model.json
{
"type": "Slice",
"fieldset": "Share Print",
"description": "Template model for Share Print",
"icon": "thumb_up",
"display": "list",
"non-repeat": {
"title": {
"type": "StructuredText",
"config": {
"single": "heading1",
"label": "Title",
"placeholder": "This is where it all begins..."
}
}
}
}
In my Code
- Replace modal.json with the shareprint json from the json editor (See Step 4)
modal.json (with shareprint json copied in from json editor)
{
"type": "Slice",
"fieldset": "Share Print",
"description": "Share and Print",
"icon": "local_printshop",
"display": "list",
"non-repeat": {},
"repeat": {}
}
- Replace custom types code (/custom_types/post.json) with select all, copy all code from the JSON editor (that now includes reference to my slice).
After all that Iâm getting the same error as everyone else.
QUESTIONS
- Whatâs going wrong?
- Is this suggested workflow?
- If so please add this to your documentation as itâs taken me ages to work out in what order I do prismic UI tasks and terminal tasks. Most of your guides dont cover both sides in one guide.
thanks
