VueJS 3 with Pinia without npm

June 18, 2023

I’m really desperate now. Nowhere in the documentation, nowhere on google results can I find an answer to a simple question: how to install/import PINIA in a VUE application.

Lets have basic VUE app:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    // HERE IS THE PROBLEM
    import { pinia } from 'https:WHAT-URT-TO-USE-????'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

My question:

how to install pinia to this app? what is the right URL?

I don’t want any mpm install… just simple js code, no local server, nothing like that

I’m not making a server application, I want a JS application that runs in the browser

Can someone send me a sample application where pinia is imported?

>Solution :

Most browser/client-side packages you install via npm, you can also find them from unpkg. I see that you’re already using the Vue package from unpkg, so you can use Pinia the same way with the URL: https://unpkg.com/pinia/index.js. The import approach is then just:

import { createPinia, PiniaVuePlugin } from 'https://unpkg.com/pinia/index.js'

Tip: to browse the files of a package via unpkg, use this URL format: https://unpkg.com/browse/<package_name>/, e.g https://unpkg.com/browse/pinia/.
Note that the ending forward slash is important, make sure you don’t leave it out.