Can I use Pinia without installing it?

[3zzy]

Hi,

I'm wondering if I could use Pinia without installing it via the usual app.use(createPinia()) mechanism?

The reason I ask is because all components are exported to Custom Elements so there's no Vue instance to install the plugin. This comment by @LinusBorg might explain my motivation: vuejs/vue-web-component-wrapper#93 (comment)

Thanks!

[posva]

You could technically do setActivePinia(createPinia()). Pinia Plugins require an app instance to be effective, so you might need to write to pinia._a a fake app and make sure to do it before any call to pinia.use().

Note that if you are shipping components that use Pinia, you should consider using provide/inject instead. If you still want to use pinia, users of your components should install the pinia instance themselves if they are building a Vue application.

[mrcego]

When you say to write to pinia._a what you mean?.
I did this and works (thanks!):

import { defineStore, createPinia, setActivePinia } from "pinia";

setActivePinia(createPinia());

export const useCounterStore = defineStore({
  id: "counter",
  state: () => ({
    counter: 0,
  }),

  actions: {
    increment() {
      this.counter++;
    },
  },
});

Even works for independent stores. Now they are "portable".

Hey buddy. Do you mind to share an example about how to use this approach? I'm working with CE for "embbeding" into another no Vue project, so we need Pinia. Thanks in advanced.

[capynet]

Yes no problem. Look:
https://github.com/capynet/vue3-component-library-test/blob/master/src/components/CustomButton/CustomButton.vue#L8
And here are the two sample stores:
https://github.com/capynet/vue3-component-library-test/tree/master/src/stores

[mrcego]

@capynet Hey buddy, first, thanks for your time replying to me, much appreciate. Your approach looks like it works, but I see a warning in console.

[Vue warn]: injection "Symbol(pinia)" not found

I'm using pinia-plugin-persistedstate to keep copies from differents stores in Local Storage, and I have setup them doing a little change from your examples:

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
setActivePinia(pinia)

Any hint about this? Thanks in advanced!

EDIT: Nice, I have made it work finally applying this approach. Thanks for your help putting me in the right direction

[johnwc]

@mrcego can you show us the final code that your figured out using the approach you pointed out?

[mrcego]

@mrcego can you show us the final code that your figured out using the approach you pointed out?

Hey!

My use case was a Web Component using Vue with working external dependencies like Pinia or vue-router. Using https://github.com/unplugin/unplugin-vue-ce I was able to do that.

As alternative, check this repo: https://github.com/EranGrin/vue-web-component-wrapper

[amaury-hanser]

Hello,

I'm having the same use case, we would like to have web components and share a store between them.
I've tried to use the same store as written above, but I have this error in the console:

[Vue warn]: injection "Symbol(pinia)" not found at <HelloWorld.ce msg="message" >

I have a dead simple exemple.

1. main.ts

import { defineCustomElement } from 'vue'
import HelloWorld from './components/HelloWorld.ce.vue'

const ExampleElement = defineCustomElement(HelloWorld)
customElements.define('hello-world', ExampleElement)

2. store.ts

import { defineStore, createPinia, setActivePinia } from "pinia";

setActivePinia(createPinia());

export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 0,
  }),

  actions: {
    increment() {
      this.counter++;
    },
  },
});

3. HelloWorld.ce.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useCounterStore } from '../store.ts'

defineProps<{ msg: string }>()

const store = useCounterStore()

const count = ref(store.counter)
</script>

<template>
  <h1>{{ msg }}</h1>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
</template>

It's probably a dumb mistake on my part, but any help would be greatly appreciated!

[websilone]

A little bit late for an answer but I think the error could come from the line where you do const count = ref(store.counter).

I think to access a store state (and keep it reactive), you need to use a computed instead : const count = computed(() => store.counter)