Pinia in Vite library build #2051
-
|
I have a Nuxt 3 admin application, and I want to build a companion viewer application that can be embedded in other sites. This companion app is a Vite library build. It shares stores with the Nuxt 3 app. I'm having a hard time understanding how to include Pinia in this setup. I found the following related threads but still having problems: With the basic setup below, Pinia is undefined. I'm getting the following error in the console:
Is it possible to use Pinia with a UMD build? Any advice or example is appreciated. Here's how I'd like to use the resulting library: <!DOCTYPE html>
<html lang="en">
<head>
<title>Viewer App Example</title>
</head>
<body>
<div id="example">
<viewer
key="4c2067bf"
name="Example client"
param3="People"
>
</viewer>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- Do I need to load Pinia from a CDN? What should that look like? -->
<script>
viewerGlobals = {
foo: 'bar'
}
</script>
<script src="lib/viewer-client.umd.js"></script>
<link href="lib/viewer-client.css" rel="stylesheet">
</body>
</html>Here is my Vite config: import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
...
'vue': 'vue/dist/vue.esm-bundler.js',
// Do I need to alias pinia?
}
},
define: {
'process.env.NODE_ENV': '"production"'
},
build: {
lib: {
entry: '/src/viewer-client.js',
name: 'viewerClient',
formats: ['es', 'umd'],
fileName: (format, alias) => `${alias}.${format}.js`,
},
rollupOptions: {
external: ['vue', 'pinia'],
output: {
globals: {
vue: 'Vue'
},
}
},
},
})And here's the gist of my entry script: import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { useRouter } from "@/client/useRouter.js";
import ClientApp from '@/components/client/ClientApp.vue'
const pinia = createPinia()
const router = useRouter(...)
const app = createApp({})
app.component('viewer', ClientApp)
app.use(pinia)
app.use(router)
router.isReady().then(() => app.mount('#example')) |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
I got this working by following the model I had for Vue. Here's my working vite.config import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
...
'vue': 'vue/dist/vue.esm-bundler.js',
'pinia': 'pinia/dist/pinia.esm-browser.js',
'vue-router': 'vue-router/dist/vue-router.esm-bundler.js'
}
},
define: {
'process.env.NODE_ENV': '"production"'
},
build: {
lib: {
entry: '/src/viewer.js',
name: 'viewer',
formats: ['es', 'umd'],
fileName: (format, alias) => `${alias}.${format}.js`,
},
rollupOptions: {
external: [
'vue',
'pinia',
'vue-router'
],
output: {
globals: {
vue: 'Vue',
pinia: 'Pinia',
'vue-router': 'VueRouter'
},
}
},
},
}) |
Beta Was this translation helpful? Give feedback.
I got this working by following the model I had for Vue. Here's my working vite.config