@prismicio/vue v4 Migration Guide


This is a guide for upgrading a project from @prismicio/vue v3 to v4.

@prismicio/vue v4 comes with our updated client, @prismicio/client v7. Breaking changes on this version are mainly inherited from @prismicio/client v7. The following instructions walk you through upgrading to the updated package.

Benefits of upgrading

  • New utilities from @prismicio/client v7 are now available
  • Deprecated APIs from @prismcio/client v5 and v6 were removed
  • Deprecated APIs from @prismicio/helpers v2 were removed
  • Deprecated APIs from @prismicio/types v0 were removed
  • Improved code-splitting and tree shaking

Update packages in package.json

Update your package.json to use the latest version of @prismicio/vue.

  "dependencies": {
    "@prismicio/vue": "^4.0.0"

Update your installed packages with npm.

npm install

Handling breaking changes

The following changes are required when upgrading to @prismicio/vue v4.

Migrate from removed deprecated APIs

APIs that were deprecated in @prismicio/client v5 and v6 were removed. If you didn’t migrate from them previously, you now need to.




// Following examples only show the `usePrismic()` method but
// are also applicable for the `this.$prismic` method.


// For `.get` and any other query methods

 usePrismic().client.get({ filters: ... });

// For `.get` and any other query methods

 usePrismic().client.get({ orderings: [{ field: "my.product.price", direction: "desc" }] };


New features

Previously, @prismicio/helpers v2 helper functions had signatures in the following fashion:

asSomething(field, option1, option2, ..., optionN)

To standardize and help our API grow better, we standardized those helper functions signatures to the following.

asSomething(field, options)

While the old helper functions signatures will still work with @prismicio/client v7, they are now considered deprecated and will be removed in a future major. This affects three helper functions:

  • asLink()
  • asHTML()
  • asText()

While this is optional, we recommend that you migrate these helper functions to the new signature:


 usePrismic().asLink(field, { linkResolver })

 usePrismic().asHTML(field, { linkResolver })

 usePrismic().asHTML(field, { serializer })

 usePrismic().asHTML(field, { linkResolver, serializer })

 usePrismic().asText(field, { separator })

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.