{"id":18076,"library":"vue-froala-wysiwyg","title":"Vue.js Froala WYSIWYG Editor Wrapper","description":"vue-froala-wysiwyg is an official Vue.js component that provides bindings for the Froala WYSIWYG HTML rich text editor. Currently at version 5.1.0, this package is specifically designed for Vue 3.x applications and integrates with Froala Editor version 3. It receives active maintenance with frequent patch releases addressing bug fixes, and periodic minor releases introducing new features like page breaks, export to Word, and enhanced table functionalities. A key differentiator is that the underlying Froala Editor is a commercial product known for its extensive feature set, mobile-first design, and enterprise-grade capabilities, requiring a license for production use. This wrapper simplifies the integration of the feature-rich Froala editor into Vue projects, handling component lifecycle and data binding.","status":"active","version":"5.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/froala/vue-froala-wysiwyg","tags":["javascript","vue","froala","html","text","editor","wysisyg","rich editor","rich text editor"],"install":[{"cmd":"npm install vue-froala-wysiwyg","lang":"bash","label":"npm"},{"cmd":"yarn add vue-froala-wysiwyg","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-froala-wysiwyg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package provides Vue bindings for the Froala WYSIWYG editor, which must be installed separately as its core JavaScript and CSS assets are directly imported and utilized by the wrapper. A specific Froala Editor version (v3) is implied by the compatibility statement.","package":"froala-editor","optional":false}],"imports":[{"note":"For global registration with `app.use()`. The package is designed for Vue 3, so ESM imports are standard.","wrong":"const VueFroala = require('vue-froala-wysiwyg');","symbol":"VueFroala","correct":"import VueFroala from 'vue-froala-wysiwyg';"},{"note":"After global registration with `app.use(VueFroala)`, the component is used as `<froala>`. The `v-model:value` binding is the Vue 3 explicit prop binding.","wrong":"<froala-editor ...></froala-editor>","symbol":"Froala component (as tag)","correct":"<froala :tag=\"'textarea'\" :config=\"config\" v-model:value=\"model\"></froala>"},{"note":"The core Froala Editor JavaScript and CSS must be manually imported into your application. This includes the main editor styles, theme styles, and any required plugins.","wrong":"No direct import of 'froala-editor' package in main.js, assuming it's bundled or auto-imported by vue-froala-wysiwyg.","symbol":"Froala Editor JS/CSS","correct":"import 'froala-editor/js/plugins.pkgd.min.js';\nimport 'froala-editor/css/froala_editor.pkgd.min.css';\nimport 'froala-editor/css/froala_style.min.css';"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport VueFroala from 'vue-froala-wysiwyg';\n\n// Import Froala Editor JS and CSS files directly\nimport 'froala-editor/js/plugins.pkgd.min.js';\n// Import specific third-party plugins if needed\n// import 'froala-editor/js/third_party/embedly.min';\n// import 'froala-editor/js/third_party/font_awesome.min';\n\nimport 'froala-editor/css/froala_editor.pkgd.min.css';\nimport 'froala-editor/css/froala_style.min.css';\n\nconst app = createApp(App);\n\napp.use(VueFroala);\napp.mount('#app');\n\n// App.vue\n/*\n<template>\n  <div id=\"app\">\n    <froala id=\"edit\" :tag=\"'textarea'\" :config=\"config\" v-model:value=\"model\"></froala>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data () {\n    return {\n      config: {\n        placeholderText: 'Edit Your Content Here!',\n        events: {\n          initialized: function () {\n            console.log('Froala editor initialized');\n          }\n        }\n      },\n      model: '<h1>Hello, Froala!</h1><p>Edit Your Content Here!</p>'\n    }\n  }\n}\n</script>\n\n<style>\nbody {\n  font-family: sans-serif;\n  margin: 20px;\n}\n#app {\n  max-width: 800px;\n  margin: 0 auto;\n  border: 1px solid #eee;\n  padding: 20px;\n}\n</style>\n*/","lang":"typescript","description":"This quickstart demonstrates how to set up `vue-froala-wysiwyg` in a Vue 3 application, including global registration, importing necessary Froala Editor assets, and basic component usage with data binding and configuration."},"warnings":[{"fix":"Ensure your project is running Vue 3.x. For new projects, always start with Vue 3. For existing Vue 2 projects, consider migrating to Vue 3 or using an older compatible version of this package if available.","message":"Versions of `vue-froala-wysiwyg` from 3.0.0 onwards are exclusively compatible with Vue 3.x. Previous versions (v1.x, v2.x) supported Vue 1.x and Vue 2.x respectively. Attempting to use v5.x with a Vue 2 project will result in runtime errors.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Purchase an appropriate Froala Editor license from the official website. The license key should then be passed in the editor's configuration object. For example: `{ licenseKey: 'YOUR_LICENSE_KEY' }`.","message":"The underlying Froala WYSIWYG HTML Editor is a commercial product and requires a license for production use. Without a valid license key, the editor will display a watermark or cease to function after a trial period.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Add `import 'froala-editor/js/plugins.pkgd.min.js';`, `import 'froala-editor/css/froala_editor.pkgd.min.css';`, and `import 'froala-editor/css/froala_style.min.css';` to your main JavaScript entry file (e.g., `main.js` or `App.vue`). Ensure your build system (Webpack, Vite) is configured to handle CSS imports correctly.","message":"The `froala-editor` core JavaScript and CSS files, including plugins, must be explicitly imported in your application. The `vue-froala-wysiwyg` wrapper does not automatically bundle or import these assets. Missing imports will lead to a non-functional or unstyled editor.","severity":"gotcha","affected_versions":"*"},{"fix":"Use `immediateVueModelUpdate: false` (the default) unless real-time binding is absolutely critical and performance is not a concern. The model will still update on editor blur or when the editor's internal change events fire, which is often sufficient.","message":"The `immediateVueModelUpdate` option, when set to `true`, can lead to performance issues, especially with large or complex content, as it triggers a Vue model update on every key release.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure `app.use(VueFroala);` is called in your main application entry point (e.g., `main.js` for global registration). If using it locally in a component, you would need to import and register it in that component's `components` option, e.g., `import { FroalaEditorComponent } from 'vue-froala-wysiwyg'; components: { FroalaEditorComponent }`.","cause":"The Froala Vue component was not registered globally or locally in the current Vue application context.","error":"Failed to resolve component: froala"},{"fix":"Verify that `import 'froala-editor/js/plugins.pkgd.min.js';` (and any other necessary Froala JS files) is present and executed *before* your Vue application mounts or attempts to render the Froala component. Ordering of imports matters.","cause":"The core Froala Editor JavaScript (`froala-editor/js/plugins.pkgd.min.js`) was not loaded or initialized before the `vue-froala-wysiwyg` component attempted to use its functionalities.","error":"TypeError: Cannot read properties of undefined (reading 'registerPlugin') or similar errors related to FroalaEditor methods"},{"fix":"Obtain a valid Froala Editor license. Pass the `licenseKey` in the `config` prop of the `<froala>` component, for example: `:config=\"{ licenseKey: 'YOUR_LICENSE_KEY' }\"`. Ensure the key matches the domain and usage rights of your application.","cause":"This indicates that a valid Froala Editor license key has not been provided or is incorrect for the production environment.","error":"Froala Editor displays a watermark or stops functioning after a trial"},{"fix":"Ensure `import 'froala-editor/css/froala_editor.pkgd.min.css';` and `import 'froala-editor/css/froala_style.min.css';` are present in your JavaScript entry file. Verify that your `webpack.config.js` or `vite.config.js` includes appropriate loaders (e.g., `style-loader`, `css-loader`, PostCSS, Sass loaders if applicable) for `.css` files.","cause":"The Froala Editor CSS files are not being correctly loaded or processed by your build system (e.g., Webpack, Vite).","error":"Froala editor styles are missing or incorrect"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}