The documentation for the Nuxt module doesn't mention slices anywhere, and it doesn't appear to include the slice-zone component mentioned in some of the other Prismic Vue documentation. It's not clear how much of this is automatic, and how much I need to install and configure.
document.body has slices in it, but I don't know what to put in my template to render the page, and I don't know how to map the slices to components in my project.
Do I need to install the Slice Machine? The Prismic CLI? Or does the Nuxt module already handle this somehow?
I've avoided looking at the Slice Machine stuff so far, because it's marked as "beta" and I'm already confused enough by the rest of the documentation
The SliceZone component provided by the vue-slicezone package is specifically designed to work with Nuxt. (It will actually perform the API query for you in a Nuxt project.) You can get instructions on how to add it to your project in the documentation for the package:
You can also read about the Slice Zone in our documentation for Nuxt and Prismic:
Thanks, Sam! I somehow missed that vue-slicezone link in the docs. Following the instructions on that page, I get an error:
ERROR [Vue warn]: Error in render: "TypeError: Cannot read property 'resolver' of undefined"
If I pass in a resolver prop for a method that just prints out the slice argument, it does indeed find the three instances of the FooSlice test slice I put on my page. I created a component in @/slices/FooSlice.vue, but to no avail. Does the problem lie in my nuxt config? or my sm.json? or somewhere else?
edit: if I write my own resolver to return the FooSlice.vue file, it does render the components on the page with no errors... but I'm thinking this should be automatic, right?
I mentioned in my edit that it does work if I make a resolver method manually, but shouldn't it be automatic with Nuxt? The docs (which are very disjointed for Nuxt, you're right) make it sound like it will PascalCase the slice name, and grab it out of the root/slices directory. And I assume it should also use the "vue essential slices" where appropriate.
If I do end up using a manual resolver (which is fine, I guess), can you also please help me find where it says how to pass the slice data/content from prismic into these slice components? In Vue devtools it looks like no props are being passed in.
That's what I tried in my second post in this thread, and I followed those directions to the letter, as far as I know, but I'm getting that error when it's trying to auto-resolve the components. I'm thinking I missed some configuration step, or my slice components aren't in the right place, but I can't tell what's causing the error.
Is there anything I need to do to configure nuxt-sm besides just having it present in the dependencies?
edit: the "Cannot read property 'resolver' of undefined" error is coming from this line of code in vue-slicezone/index.js:
An update on this other question I had: I found that the fields from the editor are all passed in as one prop object called slice, so that's sorted All I want to figure out now is if I can get the resolver to happen automatically like the docs suggest.
I think I got it! I had to add 'nuxt-sm' to the modules array in nuxt.config.js, and also to the build.transpile array.
Interestingly, I don't have an index.js file in my slices directory, and it seems to be automatically resolving the slices just fine...
As of right now, with nuxt-sm version 0.0.8, the documentation is at once all over the place, and nowhere Future Nuxt users would surely appreciate a few careful revisions to the documentation!