Skip to content

Pinia for Vue SFC Playground #7258

Open
@vanillajonathan

Description

@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

Activity

edison1105

edison1105 commented on Dec 1, 2022

@edison1105
Member

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

jacekkarczmarczyk

jacekkarczmarczyk commented on Dec 1, 2022

@jacekkarczmarczyk
Contributor
edison1105

edison1105 commented on Dec 1, 2022

@edison1105
Member

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

vanillajonathan

vanillajonathan commented on Dec 1, 2022

@vanillajonathan
Author

@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

jacekkarczmarczyk commented on Dec 1, 2022

@jacekkarczmarczyk
Contributor

@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

vanillajonathan commented on Dec 1, 2022

@vanillajonathan
Author

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

Sight-wcg commented on Dec 2, 2022

@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

image

vanillajonathan

vanillajonathan commented on Dec 2, 2022

@vanillajonathan
Author

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

skirtles-code commented on Dec 16, 2022

@skirtles-code
Contributor

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

vanillajonathan commented on Dec 16, 2022

@vanillajonathan
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haoqunjiang@edison1105@vanillajonathan@jacekkarczmarczyk@Sight-wcg

        Issue actions

          Pinia for Vue SFC Playground · Issue #7258 · vuejs/core