Using Pinia standalone (CDN or UNPKG) mode #1051

balage1551 · 2022-02-13T07:40:46Z

balage1551
Feb 13, 2022

I use pinia in several projects through npm, but now I have a micro project where I should use it a standalone (CDN) mode.

I've found an unpkg reference to pinia, but can't find a way to do it.

This is my index.html skeleton:

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
    <v-app>
        <v-main>
            <v-container>Hello world</v-container>
        </v-main>
    </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script src="https://unpkg.com/pinia"></script>
<script>

    // This won't work: not top level
    // import { createPinia } from 'pinia'

    new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        pinia   // Doesn't work, either
    })

    Vue.use(createPinia())  // As this fails also
</script>
</body>
</html>

Is there an example or tutorial using pania standalone?

Thanks.

Answered by soc221b

Feb 13, 2022

Install @vue/composition-api and vue-demi.
Use global variable: Pinia to access PInia's APIs.
Register plugin: https://pinia.vuejs.org/api/modules/pinia.html#piniavueplugin

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
    <v-app>
        <v-main>
…

View full answer

soc221b · 2022-02-13T09:18:28Z

soc221b
Feb 13, 2022

Install @vue/composition-api and vue-demi.
Use global variable: Pinia to access PInia's APIs.
Register plugin: https://pinia.vuejs.org/api/modules/pinia.html#piniavueplugin

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
    <v-app>
        <v-main>
            <v-container>Hello world</v-container>
            <button @click="increment">Count is: {{ value }}</button>
        </v-main>
    </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<script src="https://unpkg.com/@vue/composition-api"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/pinia"></script>

<script>
    const useCounterStore = Pinia.defineStore('counter', {
      state() {
        return {
          value: 0
        }
      },
      actions: {
        increment(state) {
          this.value++
        }
      }
    })

    Vue.use(Pinia.PiniaVuePlugin)
    new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        pinia: Pinia.createPinia(),
        computed: {
          ...Pinia.mapState(useCounterStore, ['value'])
        },
        methods: {
          ...Pinia.mapActions(useCounterStore, ['increment'])
        },
    })
</script>
</body>
</html>

7 replies

guyinpv Jun 23, 2022

Is the composition-api package still needed on Vue3 to be able to use Pinia without a build process? I have a simple app using only core Vue, but I do want to track state, and Pinia doesn't seem to have regular module-based version, it uses the exports style. My app happens to be using the options API, so can Pinia be used with that?

How do I use Pinia with Vue3 and standard CDN packages and options API?

WildWorldEducation Jan 10, 2023

@guyinpv https://forum.vuejs.org/t/vue3-with-pinia-over-cdn/132667

lanmaster53 Aug 9, 2023

I am in search of the same answer, but unfortunately, the forum is down and this link is no longer helpful. Can someone post the solution here? Thanks.

thomas-shirley Aug 16, 2023

Me too, also looking for a solution to this issue: Vue 3 & Pinia without a build process. Pinia has an ESM build, but the imports don't play nice...

lanmaster53 Aug 16, 2023

@thomas-shirley Here's how I got it working. There's some omitted code here, but all the main pieces are here and you should be able to get it working.

index.html

    <script src="https://unpkg.com/vue-demi"></script>
    <script src="https://unpkg.com/pinia"></script>

main.js

import App from './app.js'
import { router } from './router.js'

const { createApp } = Vue;
const { createPinia } = Pinia;
const pinia = createPinia()
const app = createApp(App)

app.use(router)
app.use(pinia)
app.mount('#app');

auth-store.js

const { defineStore } = Pinia
const { ref, computed } = Vue

export const useAuthStore = defineStore('auth', () => {
    const userInfo = ref(JSON.parse(localStorage.getItem("user")));
    ...

    const isLoggedIn = computed(() => {
        if (userInfo.value === null) {
            return false;
        };
        return true;
    });

    const getUserRole = computed(() => {
        if (isLoggedIn.value) {
            return userInfo.value.role;
        };
        return "guest";
    });

    return {
        userInfo,
        isLoggedIn,
        getUserRole,
    };
});

sample-component.js

import { useAuthStore } from "../stores/auth-store.js"
...
export default {
    template,
    setup () {
        const authStore = useAuthStore();
        console.log(authStore.userinfo);
        ...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using Pinia standalone (CDN or UNPKG) mode #1051

{{title}}

Replies: 1 comment 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Using Pinia standalone (CDN or UNPKG) mode #1051

balage1551 Feb 13, 2022

Replies: 1 comment · 7 replies

soc221b Feb 13, 2022

guyinpv Jun 23, 2022

WildWorldEducation Jan 10, 2023

lanmaster53 Aug 9, 2023

thomas-shirley Aug 16, 2023

lanmaster53 Aug 16, 2023

balage1551
Feb 13, 2022

Replies: 1 comment 7 replies

soc221b
Feb 13, 2022