@prismicio/vue v4 Migration Guide

Overview

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.

- this.$prismic.predicate;
+ this.$prismic.filter;

- usePrismic().predicate;
+ usePrismic().filter;

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

- usePrismic().client.query();
+ usePrismic().client.get();

// For `.get` and any other query methods
- usePrismic().client.get({ predicates: ... });
+ usePrismic().client.get({ filters: ... });

// For `.get` and any other query methods
- usePrismic().client.get({ orderings: "[my.product.price desc]" });
- usePrismic().client.get({ orderings: { field: "my.product.price", direction: "desc" } });
+ usePrismic().client.get({ orderings: [{ field: "my.product.price", direction: "desc" }] };

- usePrismic().client.graphqlFetch();
+ usePrismic().client.graphQLFetch();

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().asLink(field, { linkResolver })

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

- usePrismic().asHTML(field, null, serializer)
+ usePrismic().asHTML(field, { serializer })

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

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