Import npm package into a Vue.js Single File component

Question

I would like to use Jodit in a SFC, but I am not sure how this is supposed to be done. I realized there is a wrapper (jodit-vue), but for educational purposes, I would like to know how it's done without it. I created a Vue CLI project with default presets, and all I changed is the App.vue:

<template>
  <div id="app">
    <textarea id="editor" name="editor"></textarea>
  </div>
</template>

<script>
import "../node_modules/jodit/build/jodit.min.js"

export default {
  name: 'App',
  created(){
    let editor = new Jodit('#editor');
    editor.value = '<p>start</p>';
  }
}
</script>

<style>
@import "../node_modules/jodit/build/jodit.min.css" ;
</style>

This produces the error: error 'Jodit' is not defined no-undef, and if I change the import to:

import Jodit from "../node_modules/jodit/build/jodit.min.js"

Then the compilation is fine, but the browser console says:

vue.runtime.esm.js?2b0e:1888 TypeError: _node_modules_jodit_build_jodit_min_js__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor

Admittedly, I am new to all of this, but pointing me to the right direction is appreciated.

tony19 · Accepted Answer · 2022-07-16 01:12:52Z

1

The jodit module exports the Jodit constructor, so your component would import it like this:

import { Jodit } from 'jodit'

You'd also need the Jodit styles, which could be imported like this:

import 'jodit/build/jodit.min.css'

To create a Jodit instance, we need to provide an element or selector to an existing <textarea>. The Vue component's elements are available in the mounted() lifecycle hook (not in the created() hook), so that's where we would initialize:

export default {
  mounted() {
    const editor = new Jodit('#editor')
    editor.value = '<p>start</p>'
  },
}

demo

edited Jul 16, 2022 at 1:12

answered Dec 5, 2020 at 21:20

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import npm package into a Vue.js Single File component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related