Integration nanostores DevTools with Vue as an island in Astro fails

[hipertracker]

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

[euaaaio]

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

[euaaaio]

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]

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 });
};

[hipertracker]

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/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/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]

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]

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

[hipertracker]

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]

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