Pinia for Vue SFC Playground

[vanillajonathan]

What problem does this feature solve?

Lets users experiment with Pinia on the Vue SFC Playground.

What does the proposed API look like?

import { defineStore } from 'pinia'

__modules__['App.vue'] is undefined

[edison1105]

pinia.esm-browser dependency on @vue/devtools-api which seems not have a esm-browser version.

[jacekkarczmarczyk]

@edison1105 it has: https://unpkg.com/@vue/devtools-api/lib/esm/index.js

[jacekkarczmarczyk]

Not sure what you mean, I have a PR for Vuetify playground that uses it (for Vue Router) and it seems to work fine:

https://vuetify-playground-bjer2u3fc-vuetifyjs1.vercel.app/#eNqFUk1TgzAQ/SvMnktisXroYAf/gXfjgUqsseRjkkB1Ov3vbgK2CFN6grf79u3bB69HeDaGtA2HNeSeS1OXnm+YSpK8TUtj4msEshSqR4itbjy3aS3UPvH6iYEpd3zJYPOCz2SZ0wHhxlT2N5XNT7WCHzZnSkS9OTpwF0DnO6eDe2ABQhptPTIN+XJa4cHHMMD6hmOwTmIl1DCRgBl8em/cmtJGmf2OvGtJC+xR2ygvJE8rLYt7kpHVA62E88M64U6mW6sPjlvcyGAxEE+7M67tuDCKVSd8qXS6jarqsW50VvHWa107TEHMnjAkFo+0FluKylSoin9P/Hrx8TNjNrQxhzuSnd2GUrA6kaKYR4tf0HLcZK9nEE2OuP+yHvUmeYedJ6ZOcFpAN4d/QTQJb79ELP4D

[edison1105]

@jacekkarczmarczyk
oh~ It's my fault. It works

[vanillajonathan]

@jacekkarczmarczyk oh~ It's my fault. It works

Almost:

Error resolving module specifier “pinia”. Relative module specifiers must start with “./”, “../” or “/”..
Tip: add an "import-map.json" file to specify import paths for dependencies.

[jacekkarczmarczyk]

@vanillajonathan this error happens to me only in Firefox and is not related to devtool-api as it happens also with initial empty sfc playground

[vanillajonathan]

Yeah, I tried to use Firefox. It works in Chrome and Edge though.

Could Vuex, Vue Router and Bootstrap be added too?

Failed to resolve module specifier "vuex".
Tip: add an "import-map.json" file to specify import paths for dependencies.

Failed to resolve module specifier "vue-router".
Tip: add an "import-map.json" file to specify import paths for dependencies.

Failed to resolve module specifier "bootstrap".
Tip: add an "import-map.json" file to specify import paths for dependencies.

[Sight-wcg]

Yeah, I tried to use Firefox. It works in Chrome and Edge though.

Could Vuex, Vue Router and Bootstrap be added too?

Failed to resolve module specifier "vuex".
Tip: add an "import-map.json" file to specify import paths for dependencies.

Failed to resolve module specifier "vue-router".
Tip: add an "import-map.json" file to specify import paths for dependencies.

Failed to resolve module specifier "bootstrap".
Tip: add an "import-map.json" file to specify import paths for dependencies.

Try enabling dom.importMaps.enabled

[vanillajonathan]

With disabled dom.importMaps.enabled set to false:

can't access property "default", modules['App.vue'] is undefined

With disabled dom.importMaps.enabled set to true:

The specifier “pinia” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

[skirtles-code]

I've opened a PR to make using Pinia with the SFC Playground a little less troublesome: #7311. See the example link at the top of the PR.

[vanillajonathan]

Firefox 108 now supports import maps. 👍
https://www.mozilla.org/en-US/firefox/108.0/releasenotes/