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!