Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integration nanostores DevTools with Vue as an island in Astro fails #11

Open
hipertracker opened this issue Jan 12, 2024 · 10 comments
Open

Comments

@hipertracker
Copy link

I am using the Astro framework with Vue and nanostores integrations. All is working fine, except I cannot see nanostores Devtools. They are not displayed (out of the box) under Astro DevTools or Vue Devtools.

I guess must add nanostores DevTools as the Vue plugin with the app. use() command. The problem is that the Astro-Vue integration uses a TypeScript file on the server side, so nanostores DevTools can't be added there. Any hints?

This is my repo https://github.com/hipertracker/astro-primevue-minimal

@hipertracker hipertracker changed the title Integration DevTools with Vue as an island in Astro fails Integration nanostores DevTools with Vue as an island in Astro fails Jan 12, 2024
@euaaaio
Copy link
Member

euaaaio commented Jan 12, 2024

I still haven't tried Nanostoes Devtools with Astro. What error do you see in console logs?

@euaaaio
Copy link
Member

euaaaio commented Jan 12, 2024

Nanostores are written in pure JS with declaration types (.d.ts files) without bundling or building. If Nanostores works, devtools should also works.

I'm going to assume that the problem is in the versions of the installed packages. We don't yet support “next” Vue Devtools. Try to use @vue/devtools-api version 6.5.1.

@euaaaio
Copy link
Member

euaaaio commented Jan 12, 2024

Just tested in your repo. It works.

import PrimeVue from 'primevue/config';
import type {App} from 'vue';

import { devtools } from '@nanostores/vue/devtools'

import 'primeicons/primeicons.css'
import { mainStore } from '../stores/main_store';

export default (app: App) => {
    app.use(PrimeVue);
    app.use(devtools, { mainStore });
};
image

@hipertracker
Copy link
Author

Have you tried it under Astro integration, inside _app.ts file?

When I add import {devtools} from '@nanostores/vue/devtools'

it fails with

...node_modules/.pnpm/@nanostores+vue@0.10.0_@nanostores+logger@0.2.4_@vue+devtools-api@7.0.8_nanostores@0.9.5_vue@3.4.10/node_modules/@nanostores/vue/devtools/index.js:2 import { setupDevtoolsPlugin } from '@vue/devtools-api' ^^^^^^^^^^^^^^^^^^^ SyntaxError: The requested module '@vue/devtools-api' does not provide an export named 'setupDevtoolsPlugin'

I think this is because that import is executed on the server

@hipertracker
Copy link
Author

I still haven't tried Nanostoes Devtools with Astro. What error do you see in console logs?

SyntaxError: The requested module '@vue/devtools-api' does not provide an export named 'setupDevtoolsPlugin'

@euaaaio
Copy link
Member

euaaaio commented Jan 12, 2024

Yeah, yeah. That's exactly what I wrote about. Try to install @vue/devtools-api version 6.5.1.

@hipertracker
Copy link
Author

Yeah, yeah. That's exactly what I wrote about. Try to install @vue/devtools-api version 6.5.1.

OK. This is fine now. There must be an issue in API v7.

@euaaaio
Copy link
Member

euaaaio commented Jan 12, 2024

I will not close the issue just yet. Will try to implement new devtools support this month.

@u4yk
Copy link

u4yk commented Oct 30, 2024

Has this been implemented yet? Looks like the new Vue devtools is live, and Nanostores support seems broken.

@euaaaio
Copy link
Member

euaaaio commented Oct 31, 2024

Has this been implemented yet? Looks like the new Vue devtools is live, and Nanostores support seems broken.

Already working on it. Will try to release in next two days.

This was referenced Oct 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants