{"id":13389,"library":"jodit-vue","title":"Jodit Vue Wrapper","description":"jodit-vue is a Vue.js wrapper component for the Jodit WYSIWYG editor, facilitating its integration into Vue 2 and Vue 3 applications. The package's current stable version is 3.1.0, designed specifically for Vue 3 projects. Earlier major versions, such as 2.x, cater to Vue 2 compatibility. This library offers a declarative approach to embed the rich text editor, managing its lifecycle and data binding through the standard `v-model` directive. It supports extensive customization, allowing developers to define toolbar buttons, add custom extensions, and apply comprehensive Jodit editor configurations via a dedicated `config` prop. A key differentiator is its minimalist design: it does not bundle Jodit's core CSS styles, requiring users to explicitly import `jodit/build/jodit.min.css`. This design choice maintains a lightweight wrapper while ensuring flexibility for diverse build environments.","status":"active","version":"3.1.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/WendellAdriel/jodit-vue","tags":["javascript","vue","jodit","wrapper","editor","rich editor","wysiwyg"],"install":[{"cmd":"npm install jodit-vue","lang":"bash","label":"npm"},{"cmd":"yarn add jodit-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add jodit-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the core WYSIWYG editor functionality and required CSS assets. Must be installed alongside jodit-vue.","package":"jodit","optional":false},{"reason":"Peer dependency for the Vue component framework. Version 3.x for jodit-vue v3.x, and Vue 2.x for jodit-vue v2.x.","package":"vue","optional":false}],"imports":[{"note":"JoditEditor is a named export for direct component usage in templates.","wrong":"import JoditEditor from 'jodit-vue'","symbol":"JoditEditor","correct":"import { JoditEditor } from 'jodit-vue'"},{"note":"The core Jodit CSS must be imported directly from the 'jodit' package, not 'jodit-vue'.","wrong":"import 'jodit-vue/dist/jodit.min.css'","symbol":"jodit/build/jodit.min.css","correct":"import 'jodit/build/jodit.min.css'"},{"note":"For global installation (primarily Vue 2 applications), 'jodit-vue' is imported as a default export.","wrong":"import { JoditVue } from 'jodit-vue'; Vue.use(JoditVue)","symbol":"JoditVue (global install)","correct":"import JoditVue from 'jodit-vue'; Vue.use(JoditVue)"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\nimport 'jodit/build/jodit.min.css';\nimport { JoditEditor } from 'jodit-vue';\n\nconst App = {\n  components: { JoditEditor },\n  setup() {\n    const content = ref('<h1>Welcome to Jodit Vue!</h1><p>Start editing your rich text content here.</p>');\n    const config = {\n      buttons: ['bold', 'italic', 'underline', '|', 'ul', 'ol', '|', 'link', 'image', '|', 'source'],\n      height: 300,\n      showCharsCounter: false,\n      showWordsCounter: false,\n      showXPathInStatusbar: false\n    };\n    return { content, config };\n  },\n  template: `\n    <div style=\"padding: 20px;\">\n      <h2>My Rich Text Editor</h2>\n      <JoditEditor v-model=\"content\" :config=\"config\" />\n      <h3>Current Content:</h3>\n      <div style=\"border: 1px solid #ccc; padding: 10px; min-height: 100px;\">\n        {{ content }}\n      </div>\n    </div>\n  `\n};\n\ncreateApp(App).mount('#app');","lang":"typescript","description":"This quickstart demonstrates the setup of `jodit-vue` in a Vue 3 application, including the essential CSS import, component registration, and basic usage with `v-model` and a custom configuration object for the toolbar."},"warnings":[{"fix":"For Vue 2 applications, you must use `jodit-vue` version 2.x. Ensure your `package.json` specifies the correct major version range (e.g., `\"jodit-vue\": \"^2.0.0\"` for Vue 2 or `\"jodit-vue\": \"^3.0.0\"` for Vue 3).","message":"Major version 3 of `jodit-vue` is designed exclusively for Vue 3 applications. Attempting to use `jodit-vue` v3.x in a Vue 2 project will result in runtime errors due to incompatible Vue APIs.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always include `import 'jodit/build/jodit.min.css'` in your application's entry point or component where the editor is used. Ensure `jodit` is installed as a dependency to provide this file.","message":"The `jodit-vue` wrapper does not bundle the Jodit Editor's CSS styles. The editor will appear unstyled and functionally incomplete unless the necessary CSS file is explicitly imported.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Pass a `config` prop to the `JoditEditor` component. Refer to the Jodit documentation for available configuration options. For example: `<JoditEditor :config=\"{ buttons: ['bold', 'italic'] }\" />`.","message":"Customizing the editor's behavior, such as toolbar buttons or specific features, requires passing a `config` object to the component. Without it, the editor will load with all default features, which might not be desirable for all use cases.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `jodit` is installed (`npm install jodit --save` or `yarn add jodit`) and verify the import statement is `import 'jodit/build/jodit.min.css'`.","cause":"The core Jodit Editor CSS file is missing because the 'jodit' package is not installed or the import path is incorrect.","error":"Module not found: Error: Can't resolve 'jodit/build/jodit.min.css'"},{"fix":"Add `import 'jodit/build/jodit.min.css'` to your application's main entry file (e.g., `main.js`/`main.ts`) or the component where `JoditEditor` is used.","cause":"The required Jodit Editor CSS (`jodit.min.css`) has not been imported into the application.","error":"Editor appears unstyled or with broken UI elements."},{"fix":"Verify your `jodit-vue` version matches your Vue version. Use `jodit-vue@^2.0.0` for Vue 2 and `jodit-vue@^3.0.0` for Vue 3. Adjust your `package.json` accordingly and reinstall dependencies.","cause":"This warning typically occurs when using `jodit-vue` v3.x (designed for Vue 3) in a Vue 2 application, or vice-versa, due to incompatible rendering contexts.","error":"[Vue warn]: Component provided with 'render' function but no 'template'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}