Adding a plugin to vite - vue.js

Question

I am trying out Vite and using it to develop a Vue app with Prismic Cms. In reading Prismic Doc's I see have to install dependencies
npm install #prismicio/vue #prismicio/client prismic-dom
Doc's then say you have to register it:
To use #prismicio/vue, you must register it in your app entry point, which is most likely ~/src/main.js.
The access token and API options are only necessary if your repo is set to private.
// `~/src/main.js`
import Vue from 'vue'
import App from './App'
import PrismicVue from '#prismicio/vue'
import linkResolver from './link-resolver' // Update this path if necessary
const accessToken = '' // Leave empty if your repo is public
const endpoint = 'https://your-repo-name.cdn.prismic.io/api/v2' // Use your repo name
// Register plugin
Vue.use(PrismicVue, {
endpoint,
apiOptions: { accessToken },
linkResolver
})
In reading Vite doc's I see you add plugins via the vite.config.js file instead of using Vue.use() in main.js. So I created one as follows:
import { defineConfig } from "vite";
import Vue from "#vitejs/plugin-vue";
import PrismicVue from "#prismicio/vue";
import linkResolver from "./link-resolver"; // Update this path if necessary
const accessToken = ""; // Leave empty if your repo is public
const endpoint = "https://*******-****.cdn.prismic.io/api/v2"; // Use your repo name
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
Vue(),
PrismicVue({
endpoint,
apiOptions: { accessToken },
linkResolver,
}),
],
});
However I get error as follows:
failed to load config from C:\Users\akill\Github\shs\vite.config.js
error when starting dev server:
TypeError: (0 , import_vue.default) is not a function at Object.<anonymous> (C:\Users\akill\Github\shs\vite.config.js:53:28)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.require.extensions.<computed> [as .js]
(C:\Users\akill\Github\shs\node_modules\vite\dist\node\chunks\dep-98dbe93b.js:76005:20)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at loadConfigFromBundledFile (C:\Users\akill\Github\shs\node_modules\vite\dist\node\chunks\dep-98dbe93b.js:76013:17)
at loadConfigFromFile (C:\Users\akill\Github\shs\node_modules\vite\dist\node\chunks\dep-98dbe93b.js:75932:32)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! shs#0.0.0 dev: `vite --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the shs#0.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I also notice VS Code is giving me a hint # import of PrismicVue line of
Could not find a declaration file for module '#prismicio/vue'. 'c:/Users/akill/Github/shs/node_modules/#prismicio/vue/dist/prismic-vue.common.js' implicitly has an 'any' type.
I have isolated it to the line "PrismicVue({endpoint,apiOptions: { accessToken }, Etc....})," causing the error. Can someone explain what is the proper way to import this plugin in Vite? Thanks in advance.

Answer 1

vite.config.js's plugins property is intended for Vite plugins, which are for Vite itself (e.g., adding a custom transform for specific file types). That config is not for Vue plugins, which can only be installed in a Vue 3 app with app.use().
To setup Prismic with Vue 3:
Install the following dependencies. The alpha versions of #prismicio/vue and #prismicio/client (3.x and 6.x, respectively) are needed for Vue 3 support.
npm i -S #prismicio/vue#alpha #prismicio/client#alpha prismic-dom
Create a link resolver that returns a route path based on a given Prismic document type. The resolved route path should already be registered in router.js:
const resolver = doc => {
if (doc.isBroken) {
return '/not-found'
}
if (doc.type === 'blog_home') {
return '/blog'
} else if (doc.type === 'post') {
return '/blog/' + doc.uid
}
return '/not-found'
}
export default resolver
In src/main.js, use createPrismic() from #prismic/vue to create the Vue plugin, and pass that along with the link resolver to app.use():
import { createApp } from 'vue'
import { createPrismic } from '#prismicio/vue'
import linkResolver from './prismic/link-resolver'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.use(createPrismic({
endpoint: 'https://blog-demo2.prismic.io/api/v2',
linkResolver,
}))
.mount('#app')
demo

Answer 2

You probably have a mess in your setup / package.json as there is nothing special to do - I bet that you are missing vite-plugin-vue2 and vue-template-compiler.
To get it working, try to create a new project with the following :
vite.config.js:
const { createVuePlugin } = require('vite-plugin-vue2');
module.exports = {
plugins: [
createVuePlugin()
]
};
main.js:
import Vue from 'vue';
import App from './App.vue';
import PrismicVue from "#prismicio/vue";
const accessToken = ""; // Leave empty if your repo is public
const endpoint = "https://*******-****.cdn.prismic.io/api/v2"; // Use your repo name
Vue.use(PrismicVue, {
endpoint: endpoint
});
new Vue({
render: (h) => h(App),
}).$mount('#app');
App.vue:
<template>
<div id="app">
<img
alt="Vue logo"
src="./assets/logo.png"
/>
</div>
</template>
<style>
#app {
text-align: center;
}
</style>
then package.json:
{
"name": "vue2-prismic",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"#prismicio/client": "^5.1.0",
"#prismicio/vue": "^2.0.11",
"prismic-dom": "^2.2.6",
"vite-plugin-vue2": "^1.4.0",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.14"
},
"devDependencies": {
"vite": "^2.0.5"
}
}