I am trying to integrate Tiny MCE editor with Vue js, I installed this package with npm
https://www.npmjs.com/package/vue-tinymce-editor
In the reseuces / js / app.js source file, I imported the component
import tinymce from 'vue-tinymce-editor'
Vue.component('tinymce', tinymce);
The component was created simply like this
<tinymce id="1"
:other_options="tinyOptions"
v-model="menu"></tinymce>
'menu' is the variable in vue data js.
Vue does not report errors in the Chome console, in fact the component renders correctly. The problem is that it works with the Safari browser and not with others such as Google Chrome. A bug in all respects. Has anyone faced this problem before?
I attach the screenshots of the two views on Safari and Chrome.
Chrome bugSafari works
Related
I am using Vue 3 components purely as custom elements (in ASP.NET MVC views). When I view my site on localhost, after using vue-cli-service to make a non-prod build of the Vue components (all are .ce.vue), the Vue devtools icon "lights up" (in the browser's extensions icons toolbar) indicating that it detects Vue on the page--however, the Vue tab never appears in the Chrome dev tools.
Should the Vue devtools extension work with just Vue custom elements on a page? I tried the troubleshooting steps in the F.A.Q., but none seem to apply. (I also turned off all other extensions and restarted my browser.)
Note: I am using a 32" 4k monitor, so I am definitely seeing the full Chrome dev tools UI.
Note 2: I have tried using the Vue devtools with my custom element rendered in a shadow DOM and without one.
Without a shadow DOM:
With a shadow DOM
Here is a link to the Vue.js GitHub issue with a helpful comment for the PR for making the shadow DOM wrapper optional.
defineCustomElement without shadowDom #4314
I have a simple react app created by the latest version of create-react-app (that only support node version 14+). I am trying to make this app run in IE11. So as recommended, I did following:
installed react-app-polyfill
added two imports at the beginning of index.js: import "react-app-polyfill/ie11", import "react-app-polyfill/stable"
added "ie 11" under the development in the package.json
I installed a chrome extension, IE Tab, and tested there. But still not working, I see following error when I open the chrome devtool:
IE: Error: Object doesn't support property or method 'endsWith'. Source: http://localhost:3000/static/js/bundle.js:63700
Can anyone help?
I can reproduce the issue. You can add a polyfill for endsWith() so that it can work well in IE 11.
You can include the polyfill within <script> tag in index.html.
Found this solution on the 3rd page of google. It's going to help you:
The first thing you have to do - include polyfills from react-app-polyfill at the top of your app
Then in package.json set up browserlist (add ie11, ie10, etc)
In the end - add meta tag in your public/index.html
I've installed the beta of Vue.js devtools in both Chrome and Microsoft Edge. When I load a vue web page that I'm running locally it shows
Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I've also tried setting
app.config.devTools = true;
in main.js but it has no effect.
This is for Vue.js 3.
Is there a Vue devtools browser extension that works with Vue 3?
Vue tools finally started working again after I did a yarn install on the project.
I bought and installed TailwindUI. I copied and pasted one of the Navigation components just to see how it looks in the app and the hamburger menu and the notification bell (both part of Heroicons) aren't appearing.
When I click on the part where the menu should dropdown it works. But all that's present is a little square that sort of looks like a checkbox.
Here is what it looks like in Firefox (mobile debugger):
Testing on Safari and it looks like Chrome.
In node_modules I can see heroicons are present:
The app uses Elixir/Phoenix, Vue, Webpack, and Tailwindcss.
Anyone know what the issue is or how I'd go about debugging it?
If you are not using SVG syntax, you have to install and import #heroicons/react package into your project using npm/yarn
npm install #heroicons/react
TailwindUI supports Vue 3, which does not appear to include #vue/compat. #vue/compat is a compatibility build for when one wants to migrate from Vue 2 to Vue 3. the compat build (aka, migration build) is supposed to be Vue 3 compatible but I guess it's still not enough for TailwindUI.
My vuejs app works with other browsers well, but in Internet Explorer 11 it just displays a blank page.
The Babel code is not converted. How can I fix that?
I have used Bootstrap and Google charts as plugins.