Vue 3 + Bootstrap 5 + ZingChart does not work
Problem:
I'm getting the following error in the console:
main.js:11 Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle. For more details, see https://link.vuejs.org/feature-flags. main.js:14 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. at at > at at main.js:14 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. at at > at at zingchartVue3.cjs.min.js:26 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'style') at m (zingchartVue3.cjs.min.js:26:533219) at zingchartVue3.cjs.min.js:26:533602 at runtime-core.esm-bundler.js:2675:88 at callWithErrorHandling (runtime-core.esm-bundler.js:158:18) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17) at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2655:19) at flushPostFlushCbs (runtime-core.esm-bundler.js:370:41) at flushJobs (runtime-core.esm-bundler.js:408:5)
Solution:
In this demo, we tested ZingChart with Vue 3 and bootstrap 5 and everything works perfectly fine. The "select date" button in the top right corner of the app is styled with bootstrap 5 classes. To run the app, you need to install dependencies with npm install and npm run dev to see the app in the browser.