vue-web-component-wrapper/demo-app-vite/src/pinia/counter.store.ts

A Vue 3 plugin that provides a web component wrapper with styles, seamlessly integrating with Vuex, Vue Router, Vue I18n, and supporting Tailwind CSS and Sass styles.

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

export const useCounterStore = defineStore(
  'counter',
  () => {
    const count = ref(0)
    const name = ref('Web Component')
    const doubleCount = computed(() => count.value * 2)
    function increment() {
      count.value++
    }
    function reset() {
      count.value = 0
    }

    return { count, name, doubleCount, increment, reset }
  },
  {
    persist: true,
  }
)