[Vue Warn] - Error in render

[Morney]

vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'bar' of undefined"

found in

getting the above error in console when trying to use this plugin, also I am getting this error when using the demo site: https://eolant.github.io/vuetify-toast-snackbar/

This seems to only of started happening today, any thoughts on why this is happening?

[cnayan]

I noticed this too after upgrading from "vuetify": "^2.1.12", "vuetify-loader": "^1.4.2", to "vuetify": "^2.3.0", "vuetify-loader": "^1.5.0",

The sample app was working on vuetify 2.1.12

[cnayan]

This issue is being discussed in Discord channel https://discord.com/channels/340160225338195969/351121729164410882

[cnayan]

The demo app is broken too with this error

Link to demo: https://eolant.github.io/vuetify-toast-snackbar/

[Morney]

Thanks @cnayan As far as I am aware this is not linked with Vuetify developers, so the guys at vuetify wont really look into this.

the newest version of vuetify brings some changes into snackbars and so I believe this plugin will need its code updating to come inline with recent changes.

[cnayan]

One of the core team member of Vuetify said

Due to internal changes made in VSnackbar, this plugin will have to be updated before it can be used in 2.3

[Morney]

@eolant has had no contribution on git since Oct last year, so may have to look at other options for this plugin :(

[duowb]

Try this way ` import Vuetify from "vuetify/lib"; const VuetifyObj = new Vuetify({ theme: {}, lang: { locales: { zhHans }, current: "zhHans" } });

export default VuetifyObj;

Vue.use(VuetifyToast, {$vuetify: VuetifyObj.framework} `

[cnayan]

@duoWB It worked! Thank you!

Here is the compiling code:

` import Vue from 'vue'; import Vuetify, { VSnackbar } from 'vuetify/lib' import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(Vuetify, { components: { VSnackbar } })

const opts = {}; // your options

const vueObj = new Vuetify(opts);

export default vueObj;

Vue.use(VuetifyToast, { $vuetify: vueObj.framework }); `

[Morney]

Ive got this working, seems good, thank you @cnayan and @duoWB

@ricardo17coelho

try moving your: Vue.use(vuetifyToast....

put this below the export default vueObj

Then get rid of Vue.use(vuetifyToast, { $vuetify: vueobj.framework });

And just add that into the full declaration like this:

Vue.use(VuetifyToast, { $vuetify: vuetify.framework, x: 'right', // default y: 'top', // default color: 'info', // default icon: '', iconColor: '', // default classes: [ 'body-2' ], timeout: 3000, // default dismissable: true, // default multiLine: false, // default vertical: false, // default queueable: true, // default showClose: false, // default closeText: '', // default closeColor: '', // default shorts: { custom: { color: 'purple' } }, property: '$toast' // default });

[ricardo17coelho]

Ive got this working, seems good, thank you @cnayan and @duoWB

@ricardo17coelho

try moving your: Vue.use(vuetifyToast....

put this below the export default vueObj

Then get rid of Vue.use(vuetifyToast, { $vuetify: vueobj.framework });

And just add that into the full declaration like this:

Vue.use(VuetifyToast, { $vuetify: vuetify.framework, x: 'right', // default y: 'top', // default color: 'info', // default icon: '', iconColor: '', // default classes: [ 'body-2' ], timeout: 3000, // default dismissable: true, // default multiLine: false, // default vertical: false, // default queueable: true, // default showClose: false, // default closeText: '', // default closeColor: '', // default shorts: { custom: { color: 'purple' } }, property: '$toast' // default });

it works. thanks @cnayan , @duoWB and @Morney

[jaredhan418]

Fixed. Commited Pull Request. Only Work with Vuetify 2.3 above https://github.com/jaredhan418/vuetify-toast-snackbar

[TeleMediaCC]

Resolve problem in nuxt.js plugin:

import Vue from 'vue'
import VuetifyToast from 'vuetify-toast-snackbar'

export default (context, inject) => {
	Vue.use(VuetifyToast, {
		$vuetify: context.$vuetify
	})
}

[TeleMediaCC]

Solution with shorthand:

import Vue from 'vue'
import VuetifyToast from 'vuetify-toast-snackbar'

export default ({ $vuetify }) => {
	Vue.use(VuetifyToast, {
		$vuetify
	})
}

[phiter]

There's another issue. The snackbar layout is broken.

[jaredhan418]

Hey guys, I'm uploaded a npm package https://www.npmjs.com/package/vuetify-toast-snackbar-ng compatible with Vuetify 2.3+

[ricardo17coelho]

@phiter I can confirm this... also in @jaredhan418 package

[cnayan]

@phiter @ricardo17coelho Somehow, this layout issue is not happening for me. What is different in your code?

[davidsmej88]

@phiter @ricardo17coelho. Try create global.css file, for example in src/assets and set this style

.vts .v-snack__content {
  display: flex;
  justify-content: center;
  align-items: center;
}

Then import this global file in main.js

import '../src/assets/global.css';

[phiter]

@davidsmej88 I ended up just copying the source code to my repo instead of downloading the package, since the package is not being updated anymore.

[eolant]

Sorry, guys, been very busy with a new job, I'll find time to resolve all issues soon, promise!

[pijlwagen]

typeof 'soon' === 'undefined'; // true

[p0wl90]

any updates on this? any timeline?

[pijlwagen]

any updates on this? any timeline?

No, use https://www.npmjs.com/package/vuetify-toast-snackbar-ng

[jaredhan418]

Hi there, I'm updating a new version of vuetify-toast-snackbar-ng welcome to use.

[p0wl90]

Ah nice! When I looked yesterday the layout bug still existed in your repo but you just fixed it. Thanks!

[p0wl90]

@jaredhan418 I just saw that the layout is still a bit off (the close icon is too far on the right):

I'm posting this issue here because your repository does not have an issue tracker. Maybe you can add one?

[jaredhan418]

@jaredhan418 I just saw that the layout is still a bit off (the close icon is too far on the right):

I'm posting this issue here because your repository does not have an issue tracker. Maybe you can add one?

https://github.com/jaredhan418/vuetify-toast-snackbar-ng/issues here you are.

[lorro]

Hi there, I'm updating a new version of vuetify-toast-snackbar-ng welcome to use.

@jaredhan418 I installed your package instead of vuetify-toast-snackbar but getting some strange errors

Module parse failed: Unexpected token (9:27)
You may need an appropriate loader to handle this file type.
| import mergeData from '../../util/mergeData';
| import { getObjectValueByPath, getPropertyFromItem, keyCodes } from '../../util/helpers';
| const defaultMenuProps = { ...VSelectMenuProps,
|   offsetY: true,
|   offsetOverflow: true,

 @ ./node_modules/vuetify/lib/components/VAutocomplete/index.js 1:0-44
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./node_modules/vuetify-toast-snackbar-ng/dist/index.umd.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8082 webpack/hot/dev-server ./src/main.js

[p0wl90]

There is a link to the issue tracker of his package literally above your post.

[jaredhan418]

Hi there, I'm updating a new version of vuetify-toast-snackbar-ng welcome to use.

@jaredhan418 I installed your package instead of vuetify-toast-snackbar but getting some strange errors

Module parse failed: Unexpected token (9:27)
You may need an appropriate loader to handle this file type.
| import mergeData from '../../util/mergeData';
| import { getObjectValueByPath, getPropertyFromItem, keyCodes } from '../../util/helpers';
| const defaultMenuProps = { ...VSelectMenuProps,
|   offsetY: true,
|   offsetOverflow: true,

 @ ./node_modules/vuetify/lib/components/VAutocomplete/index.js 1:0-44
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./node_modules/vuetify-toast-snackbar-ng/dist/index.umd.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8082 webpack/hot/dev-server ./src/main.js

Check your package.json or webpack setting. Not my package error.

[VictorioBerra]

import Vue from 'vue'
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(Vuetify, {
  components: {
    VSnackbar,
    VBtn,
    VIcon
  }
})

const veutifyObj = new Vuetify({
    theme: { dark: true },
});

Vue.use(VuetifyToast, { $vuetify: veutifyObj.framework })

export default veutifyObj;