`Vue is not defined`

[DanHulton]

Describe the bug
Following the documentation exactly produces this error in the console.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://gridjs.io/docs/integrations/vue/
2. Follow the documentation
3. Attempt to load page.
4. Console instead shows error ReferenceError: Vue is not defined.

Expected behavior
Grid should display without error.

Desktop (please complete the following information):

• OS: Mac OS 12.0.1
• Browser: Firefox
• Version: 94.0.1

Additional context

I am using Vue 3, but others have reported this same issue using Vue 2, here: #426

It was staled when it really should not have been, as the issue is still active and a complete blocker.

[dombavetta]

Having the same issue with Vue 2.

[Dev314]

I faced the same issue, can't use gridjs-vue 5+. Have to downgrade it to version 4, hope it will be fixed soon.

[Dev314]

Is it resolved?

[missingno-io]

I think it's due to how modules are handled now... I ran into this issue and was able to resolve by adding Vue to the window. I'd say this only a work around but hopefully it helps someone.

import Vue from 'vue';
window.Vue = Vue;

[deviarte]

Same issue for me. No way to get it to work. Downgrade to v4 worked.

[JowJoris]

How do I fix this for Nuxt3? I can't downgrade to v4 because of dependencies on vue3

[Grzyb9k]

i have same issue

[heavyhelli]

I have the same issue in my new Vue3 application.
main.esm.js?a234:1 Uncaught ReferenceError: Vue is not defined at Module.eval (main.esm.js?a234:1:1) at eval (main.esm.js:8:30) at Module../node_modules/gridjs-vue/dist/main.esm.js (chunk-vendors.js:2659:1) at __webpack_require__ (index.js:854:30) at fn (index.js:151:20) at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Home.vue?vue&type=script&lang=js:6:68) at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Home.vue?vue&type=script&lang=js (index.js:1031:1) at __webpack_require__ (index.js:854:30) at fn (index.js:151:20) at eval (Home.vue?026b:1:1)

[JowJoris]

@selfagency Any ideas how to fix this?

[bbjansen]

have the same issue. downgrading to 4 solves it, but results in many missing features.

[fbmfbm]

Sam issue for now with VueJS 3 !
Waiting for a fix to switch to production with GridJs !!
Any one ?

[ZachVogt]

Same story here, can't even get the base example code to work. Any updates on this?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kaanrkaan]

@selfagency Are you there ?

[therealokoro]

We really need a fix to this issue. Pleas someone heeelp

[palanza]

+1

[LeaderbotX400]

+1

[KayahanKahriman]

Same here

[aphavichitr]

+1

[aphavichitr]

I think it's due to how modules are handled now... I ran into this issue and was able to resolve by adding Vue to the window. I'd say this only a work around but hopefully it helps someone.

import Vue from 'vue';
window.Vue = Vue;

@missingno-io Where did you add this? I tried adding it and it still wasn't resolving.

[aphavichitr]

I think the issue is this library isn't supporting Vue 3, I found this thread with a fork for Vue 3 compatibility, but I've decided to use the Vanilla JS implementation.

#312 (comment)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[AbakusToTheMoon]

Hi everyone,

I'am trying to use GridJS with vue3 but as I see the problem is still not fixed, do someone has an idea to fix it ?

[therealokoro]

I was able to use gridjs with vue, but this was with the gridjs core library and not the wrapper for vue i.e gridjs-vue.

Here is how i used it

<script setup lang="ts">
	import { Grid } from "gridjs"
	import "gridjs/dist/theme/mermaid.css"

       // create a ref to hold the table in template
	const myTable = ref()
        // create a ref variable to hold new gridjs instance
	const gridjs = ref()

	onMounted(() => {
		gridjs.value = new Grid({
			columns: ["Name", "Email", "Phone Number"],
			data: [
				["John", "john@example.com", "(353) 01 222 3333"],
				["Mark", "mark@gmail.com", "(01) 22 888 4444"],
				["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
				["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
				["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
			],
			pagination: true,
			search: true,
			sort: true
		})

		gridjs.value.render(myTable.value)
		gridjs.value.on("cellClick", (...args: any) => console.log(args))
	})
</script>

<template>
	<h3 class="text-lg font-semibold">Gridjs Table</h3>
	<div id="id" ref="myTable"></div>
</template>

<style></style>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tuanhaviet22]

Still face this error

[vitalibr]

still facing this error...

[XAldrikX]

Same error for me...

[randomComitter]

Also have the same issue with vue 3.2.45 and gridjs-vue 5.0.4