Unable to call SnackbarProgrammatic outside of Vue instance

[mateuswetah]

Overview of the problem

Buefy-next version: 0.1.2
Vuejs version: 3.4.15
OS/Browser: Firefox, Linux Ubuntu

Description

Previously, I could instantiate Snackbar or even Modal by using something like

import { SnackbarProgrammatic as Snackbar } from 'buefy';

Snackbar.open(...);

This was useful in situations like this, where I'm passing the error handler to use Snackbar as an alert every time axios detects an error.

In the new version, I'm getting an error, and it is a weird one... it does not outputs clearly the issue, but debugging a little bit, it seems that Snackbar.open yields undefined 😢.

I'm I doing something wrong? Would it be possible some other way, without access to $buefy?

[kikuomax]

@mateuswetah If it is in a setup script, there is a workaround:

• Programmatically opening Modal from setup script #152

Since there is no global Vue instance in Vue 3, you need somehow specify a Vue app instance. If you have a Vue app instance known, you can do something like below:

import { ModalProgrammatic } from '@ntohq/buefy-next'

// somehow you know a Vue app instance
const modalProgrammatic = new ModalProgrammatic(app)
modalProgrammatic.open({
  // parameters ...
})

The above behavior was newly introduced in buefy-next, though, it is subject to change.

[mateuswetah]

Ok, I'll see if I can figure a way to pass the app instance there... but a question. If I do manage to do it, wouldn't it be the same thing of doing something like this?

app.config.globalProperties.$buefy.snackbar.open(...

[mateuswetah]

Oh and now that I read the discussion, I do like the useModal strategy, let us know when it is released in the npm package :)

[mateuswetah]

BUT... giving a try,

import { getCurrentInstance } from 'vue';

const self = getCurrentInstance(); 

At least directly in my axios.js file returns null for the current instance... maybe this won't happen in the useModal scenario because it would come from the Buefy context?

[kikuomax]

BUT... giving a try,

import { getCurrentInstance } from 'vue';

const self = getCurrentInstance(); 

At least directly in my axios.js file returns null for the current instance... maybe this won't happen in the useModal scenario because it would come from the Buefy context?

Since getCurrentInstance is an internal API of Vue, there is no official documentation about it. But I am sure getCurrentInstance returns non-null if it is called directly inside <script setup>. I have not tested myself but it might return non-null in lifecycle hooks, e.g., onMounted, and watch callbacks.

[mateuswetah]

Oh ok, didn't payed attention to the <script setup> context. Thing is, my axios.js file is imported not only in components, but in Vuex modules, for example, some stuff completely out of the Vue area. I think I'll have to refactor this logic somehow.