How do I use vue-slicezone with Nuxt?

Developing with Prismic
1

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.

Given this snippet in asyncData:

const document = await $prismic.api.getByUID('test_page', params.page, {
    lang,
});

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 :stuck_out_tongue:

3

Hey @busted_github_sso,

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:

Let me know if you have any more questions :slight_smile:

Sam

4

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"

found in

---> <SliceZone>

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?

5

Hey @busted_github_sso,

Did you try creating a resolver method, like this?

<template>
  <slice-zone type="page" :resolver="resolver" :slices="page.data.body" />
</template>

<script>
import * as MySlices from '@/slices'
import SliceZone from 'vue-slicezone'

export default {
  components: {
    SliceZone
  },
  async asyncData({ params, $prismic }) {
    return {
        page: await $prismic.api.getByUID('page', params.uid)
      }
  },
  methods: {
    resolver({ sliceName, slice, i }) {
      return MySlices[sliceName]
    }
  }
}
</script>

It might be that we need to improve this documentation. Let me know if this helps.

Sam

6

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.

7

Hey @busted_github_sso,

That's my mistake. In Nuxt, you can use the nuxt-sm package to do this for you programmatically. nuxt-sm doesn't have its own documentation, but you can read how it works in the vue-slicezone docs:

Let me know if that helps.

Sam

8

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:

resolver: maybeResolver || this.$sliceMachine.resolver

so if this.$sliceMachine is undefined then I'm definitely missing a step in setting up the nuxt-sm package. Thoughts? :thinking:

9

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.

10

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 :laughing: Future Nuxt users would surely appreciate a few careful revisions to the documentation!

11

That's great! I'm glad you figured it out. I'll take a look at our documentation to think about how we can clarify these steps. Thanks for your suggestions :slight_smile:

Sam

1 Like
12

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.