Adding a plugin to vite

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

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"
  }
}

Answer 2

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:

1. 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
   

2. 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
   

3. 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