Connect Prismic to Quasar SSR Mode

Hi Prismic peeps, I'm looking to integrate Prismic into a Quasar project deployed as SSR/PWA. Although Quasar is built on Vue, and Prismic has fantastic integration with Vue, the tricky part is that in Quasar there is no main.js file and no way to initiate Prismic globally via Vue.use(PrismicVue, {...}).
Instead, if we are motivated to use Prismic globally we are meant to boot it like the following axios and plugin example...

// boot/example-axios.js
import { boot } from "quasar/wrappers";
import axios from "axios";

const api = axios.create({ baseURL: "https://api.example.com" });

export default boot(({ app }) => {
  // storing global use with 'this'
  app.config.globalProperties.$axios = axios;
  app.config.globalProperties.$api = api;
});

export { api };

or...

// boot/file-name.js
import Vue from "vue";
import Chart from "vue2-frappe";

// Similar to Vue.use()
Chart.install(Vue);

Additional Links:
Quasar Boot Files
Using Vue Plugins in Quasar

Any suggestions on how to solve booting Prismic into Quasar?

package.json:

{
  "name": "sourceress-alpha-app",
  "version": "0.0.1",
  "description": "Supernatural Lingerie SSR",
  "productName": "Sourceress Alpha",
  "author": "CQ",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue ./",
    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@prismicio/client": "^6.1.1",
    "@prismicio/helpers": "^2.1.0",
    "@prismicio/vue": "^2.1.0",
    "@quasar/extras": "^1.0.0",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "graphql": "^16.3.0",
    "graphql-request": "^4.0.0",
    "quasar": "^2.0.0",
    "vue": "^3.0.0",
    "vue-i18n": "^9.0.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.1"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.13.14",
    "@quasar/app": "^3.0.0",
    "dotenv": "^15.0.0",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^7.0.0",
    "eslint-webpack-plugin": "^2.4.0",
    "prettier": "^2.5.1",
    "workbox-webpack-plugin": "^6.0.0"
  },
  "browserslist": [
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 12.22.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

Thanks for your time and all the effort and care from the Prismic community!

Hey @chris1,

Thanks for posting this question! It's really interesting to explore a new technology that I've never seen before :smile:

So, as I understand, you can simply assign global variables to use in your app? If that's the case, this should work.

For simplicity of configuration, you could use our basic JavaScript packages, @prismicio/client and @prismicio/helpers. The client package supplies methods for querying the API, and the helpers package supplies methods for rendering content as HTML. You could load both of them into your global variables. I'm guessing it would look like this:

// boot/example-axios.js
import { boot } from "quasar/wrappers";
import axios from "axios";
import * as prismic from "@prismicio/client"
import * as prismicH from "@prismicio/helpers"

const api = axios.create({ baseURL: "https://api.example.com" });

export default boot(({ app }) => {
  // storing global use with 'this'
  app.config.globalProperties.$axios = axios;
  app.config.globalProperties.$api = API;
  app.config.globalProperties.$prismic = prismic;
  app.config.globalProperties.$prismicH = prismicH;
});

export { api };

Furthermore, you could initialize an API client with the client plugin, with all of your client configuration:

const repositoryName = "your-repo-name";
const options = {};
const client = prismic.createClient(repositoryName, options);

And then

  app.config.globalProperties.$client = client;

Here's the documentation for the client and helpers plugins.

It's possible that you could install the Vue plugin directly, but my understanding isn't strong enough to help with that. In any case, please let us know how this goes!

Sam

Sam, thanks so much for the help! Pasting full workable solution below for those in the same scenario:

import { boot } from "quasar/wrappers";
import * as prismic from "@prismicio/client"
import * as prismicH from "@prismicio/helpers"

const endpoint = prismic.getEndpoint(process.env.PRISMIC_END_POINT);
const client = prismic.createClient(endpoint, { accessToken: process.env.PRISMIC_ACCESS_TOKEN });
 
export default boot(({ app }) => {});

export { prismic, prismicH, client };

Then anywhere in your Quasar framework, you can:

import { client } from '../boot/prismic'

Cheers to Sam.

1 Like

Awesome! Thanks for sharing :slight_smile: