\n \u003CUButton label=\"Delete\" @click=\"deleteItem\" />\n \u003CUButton label=\"Add\" @click=\"addItem\" />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nfunction deleteItem() {\n const randomIndex = Math.floor(Math.random() * data.value.length);\n data.value.splice(randomIndex, 1);\n}\n\nfunction addItem() {\n data.value.push({\n id: Math.floor(Math.random() * 10000).toString(),\n });\n}\n\nconst data = ref([\n {\n id: \"4600\",\n },\n {\n id: \"4599\",\n },\n {\n id: \"4598\",\n },\n {\n id: \"4597\",\n },\n {\n id: \"4596\",\n },\n]);\n\u003C/script>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2018,2019,2022],{"name":1985,"color":1986},{"name":2020,"color":2021},"v3","49DCB8",{"name":2023,"color":2024},"triage","ffffff",3821,"ui","Table is not reactive","2025-04-08T10:36:33Z","https://github.com/nuxt/ui/issues/3821",0.74662143,{"description":2032,"labels":2033,"number":2035,"owner":1988,"repository":1988,"state":1990,"title":2036,"updated_at":2037,"url":2038,"score":2039},"I have been trying to get Vuex (inside of Nuxt.js) to work with a SQLite database using Bookshelf.js and Knex.js. I have been able to get Bookshelf to function outside of Nuxt, but when I put the same code inside of Nuxt, I get this in my browser console upon running a model:\r\n```\r\nbluebird.js:1542\r\nUnhandled rejection TypeError: _this.driver.Database is not a constructor\r\n acquireRawConnection/\u003C@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:38103:16\r\n acquireRawConnection@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:38102:12\r\n create@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:32558:9\r\n _createResource@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:29271:3\r\n dispense@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:29231:5\r\n acquire@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:29353:3\r\n acquireConnection/\u003C@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:32608:7\r\nFrom previous event:\r\n acquireConnection@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:32599:12\r\n ensureConnection/\u003C/\u003C@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:42442:16\r\nFrom previous event:\r\n ensureConnection/\u003C@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:42440:35\r\nFrom previous event:\r\n ensureConnection@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:42439:12\r\n run@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:42285:37\r\n [\"./node_modules/knex/lib/interface.js\"]/exports.default/Target.prototype.then@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:39654:18\r\n```\r\nI am using the same setup I used outside of Nuxt, but now it isn't working. This makes me think that the issue is on Nuxt's side.\r\n\r\nP.S. If I am doing anything wrong or if there is a better way to achieve this (have Vuex interact with a database), please tell me\r\n\r\n-----\r\n\r\nTo reproduce error (may upload repo in the morning; getting late):\r\n1. Make a new Nuxt project\r\n```sh\r\nvue init nuxt/starter bug-test\r\ncd bug-test\r\nnpm install\r\n```\r\n2. Install Bookshelf, etc.\r\n```sh\r\nnpm install bookshelf knex\r\nnpm install sqlite3@3.1.11 --save-exact # 3.1.12 causes bug which makes it impossible to `npm install`\r\n```\r\n3. Add database folder (for organization)\r\n```sh\r\nmkdir database\r\ncd database\r\n```\r\n4. Add an empty SQLite database\r\n```sh\r\nsqlite3 db.sqlite\r\n# SQLite version 3.20.1...\r\nsqlite> create table blank; # not adding columns causes it to fail but still write a file; not best method but works\r\nsqlite> .exit\r\n```\r\n5. Add Bookshelf.js files (add these to `database/` directory; same as db.sqlite)\r\n 1. knexfile.js\r\n ```js\r\n module.exports = {\r\n client: 'sqlite3',\r\n connection: {\r\n filename: 'db.sqlite'\r\n },\r\n useNullAsDefault: true\r\n }\r\n ```\r\n 2. bookshelf.js\r\n ```js\r\n let knex = require('knex')(require('./knexfile'))\r\n\r\n let bookshelf = require('bookshelf')(knex)\r\n\r\n module.exports = bookshelf\r\n ```\r\n 3. migrations/users.js\r\n ```js\r\n exports.up = function (knex) {\r\n return knex.schema\r\n .createTable('users', table => {\r\n table.increments('id').primary()\r\n table.string('firstName')\r\n table.string('lastName')\r\n table.string('emailAddress')\r\n })\r\n }\r\n\r\n exports.down = function (knex) {\r\n return knex.schema\r\n .dropTable('users')\r\n }\r\n ```\r\n 4. models/users.js\r\n ```js\r\n var bookshelf = require('../bookshelf')\r\n\r\n var Users = bookshelf.Model.extend({\r\n tableName: 'users'\r\n })\r\n\r\n module.exports = Users\r\n ```\r\n6. Add new page\r\n```vue\r\n\u003Ctemplate lang=\"html\">\r\n \u003Csection>\r\n \u003Ch1>Testing Page\u003C/h1>\r\n \u003Cpre>{{users}}\u003C/pre>\r\n \u003C/section>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport Users from '~/database/models/users'\r\n\r\nexport default {\r\n computed: {\r\n users () {\r\n let users\r\n Users.fetchAll().then(function (contact) { users = contact.toJSON() })\r\n return users\r\n }\r\n }\r\n}\r\n\u003C/script>\r\n```\r\n7. Migrate and start it up\r\n```sh\r\ncd ../ # if still in database/ or pages/\r\n./node_modules/.bin/knex migrate:latest --knexfile database/knexfile.js\r\nnpm run dev\r\n```\r\n8. Open http://localhost:3000/testing (or whatever you called your page) in a browser and open console\r\n\r\n-----\r\n\r\nAny help/feedback appreciated\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1569\">#c1569\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2034],{"name":1999,"color":2000},1747,"TypeError when using Bookshelf.js","2023-01-18T15:42:21Z","https://github.com/nuxt/nuxt/issues/1747",0.7478746,{"description":2041,"labels":2042,"number":2049,"owner":1988,"repository":1988,"state":1990,"title":2050,"updated_at":2051,"url":2052,"score":2053},"### Version\n\n[v2.6.2](https://github.com/nuxt.js/releases/tag/v2.6.2)\n\n### Reproduction link\n\n[https://github.com/ThomasKientz/nuxt-firestore-repro](https://github.com/ThomasKientz/nuxt-firestore-repro)\n\n### Steps to reproduce\n\nnpm install\n\nnpm run dev\n\nnavigate to website.\n\ncheck the console.\n\n### What is expected ?\n\nThe firebase query to execute without any errors.\n\n\n### What is actually happening?\n\nOn server side (from a page reload), the firebase library produces an error. It looks like the firestore js library doesn't recognize objects from the async hook. Maybe nuxt is modifying prototypes or is messing with objects.\n\n### Additional comments?\n\nI am trying to query data by date from Firestore with Nuxt in an Universal App :\n\n```\nasyncData() {\n citiesRef\n .where(\"date\", \">\", new Date())\n .get()\n .then(() => {\n console.log(\"ok\");\n })\n return {};\n }\n```\nBut I get the error when loading from the server side (not happening in client side) :\n\n> Function Query.where() called with invalid data. Unsupported field value: a custom Date object\n\nSimilar error with :\n\n```\nasyncData() {\n citiesRef\n .add({\n name: \"Tokyo\"\n })\n .then(function(docRef) {\n console.log(\"Document written with ID: \", docRef.id);\n });\n return {};\n }\n```\n> Function CollectionReference.add() requires its first argument to be of type object, but it was: a custom Object object\n\nIt doesn't happen with the client side context.\n\nIt's doesn't appear to be a firebase error as I can not reproduce this on a simple node env with the same lib : https://github.com/ThomasKientz/firestore-node-repro \n\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9071\">#c9071\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2043,2045,2048],{"name":2044,"color":2024},"stale",{"name":2046,"color":2047},"pending triage","E99695",{"name":1999,"color":2000},5554,"Firebase firestore not working with Nuxt in server side execution.","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5554",0.75002205,{"labels":2055,"number":2057,"owner":1988,"repository":1988,"state":1990,"title":2058,"updated_at":2059,"url":2060,"score":2061},[2056],{"name":1999,"color":2000},4276,"Nasty silent bug, in store.js in convert Object to Array using Firebase","2023-01-18T20:04:04Z","https://github.com/nuxt/nuxt/issues/4276",0.750688,{"description":2063,"labels":2064,"number":2070,"owner":1988,"repository":2026,"state":1990,"title":2071,"updated_at":2072,"url":2073,"score":2074},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v18.20.5\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: default\n- Runtime Modules: nuxt-vuefire@1.0.4, @nuxt/ui@3.0.0-alpha.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.9\n\n### Reproduction\n\n\n\n\n\n```\n \u003CUTooltip :delay-duration=\"0\" :text=\"`R$ ${transactionCost.brl}`\">\n \u003CUIcon class=\"text-yellow-500 text-xs\" name=\"i-lucide-coins\" />\n \u003Cp class=\"text-neutral-200 text-xs\">\n {{ transactionCost.credits }}\n \u003C/p>\n\u003C/UTooltip>\n```\n\n``` \n\u003CNuxtLayout>\n \u003CUApp :toaster=\"{ position: 'top-right' }\">\n \u003CNuxtPage />\n \u003C/UApp>\n\u003C/NuxtLayout>\n```\n\n\n### Description\n\nThe `app.vue` is already using the `UApp`. When I try to add a `UTooltip` inside the modal, it throw an error.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```\nUncaught (in promise) Error: Injection `Symbol(TooltipProviderContext)` not found. Component must be used within `TooltipProvider`\n```",[2065,2066,2069],{"name":1985,"color":1986},{"name":2067,"color":2068},"needs reproduction","CB47CF",{"name":2020,"color":2021},2801,"[v3][UTooltip] `UTooltip` inside `UModal` causing error","2025-02-06T15:28:30Z","https://github.com/nuxt/ui/issues/2801",0.7512329,{"labels":2076,"number":2080,"owner":1988,"repository":1988,"state":1990,"title":2081,"updated_at":2082,"url":2083,"score":2084},[2077,2078,2079],{"name":2044,"color":2024},{"name":2046,"color":2047},{"name":1999,"color":2000},10026,"_nuxt dir being indexed by search engines","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10026",0.751371,{"description":2086,"labels":2087,"number":2091,"owner":1988,"repository":2026,"state":1990,"title":2092,"updated_at":2093,"url":2094,"score":2095},"### Description\n\nHi, using the UTable with Expanded feature is it possible to apply a style to the Expand column ??? I can see how to do this for columns I add but not the expanded column.\r\nAlso is it possible to change the default so the expanded is open by default? Or to change this in the script section?\r\n\r\nThanks I was unable to find answers in the docs.",[2088],{"name":2089,"color":2090},"question","d876e3",2244,"UTable Expandable questions?","2024-11-05T14:52:12Z","https://github.com/nuxt/ui/issues/2244",0.75276697,["Reactive",2097],{},["Set"],["ShallowReactive",2100],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"t7q4DqvnoOgrp-hPe0LJCtcnxVjIT97KDoNmwkFHhxo":-1},"/nuxt/ui/3338"]