How can I use it in nuxt.js with Vue?

[PhilAndrew]

Hello, I tried to use with nuxt.js and vue and didn't work, how can I make it work?

I get this error

Nuxt.js Error:

TypeError: Cannot set property 'froalaEditor' of undefined
    at Object.<anonymous> (~/froala-editor/js/froala_editor.pkgd.min.js:7:5384)
    at module.exports.d.id (~/froala-editor/js/froala_editor.pkgd.min.js:7:13)
    at Object.module.exports.module.exports (~/froala-editor/js/froala_editor.pkgd.min.js:7:253)
    at __webpack_require__ (webpack:/webpack/bootstrap 05279711d0e113a80524:25:0)
    at Object.module.exports.Object.defineProperty.value (server-bundle.js:2405:101)
    at __webpack_require__ (webpack:/webpack/bootstrap 05279711d0e113a80524:25:0)
    at Object.<anonymous> (.nuxt/index.js:94:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 05279711d0e113a80524:25:0)
    at Object.<anonymous> (server-bundle.js:2068:65)
    at __webpack_require__ (webpack:/webpack/bootstrap 05279711d0e113a80524:25:0)

[pirmax]

I have the same problem...

[briankoech]

On your plugins folder add the froala.js with the following contents:

import Vue from 'vue'
import VueFroala from 'vue-froala-wysiwyg'
import 'froala-editor/js/froala_editor.pkgd.min.js'

Vue.use(VueFroala)

then on the nuxt.config.js file add the following

...
head: {
    link: [
      {
        rel: 'stylesheet',
        href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
      }
    ]
},
css: [
    '~/node_modules/vue-wysiwyg/dist/vueWysiwyg.css',
    '~/node_modules/froala-editor/css/froala_editor.pkgd.min.css',
    '~/node_modules/froala-editor/css/froala_style.min.css'
],
plugins: [
    '~/plugins/froala.js'
],
build: {
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        jQuery: 'jquery'
      })
    ]
}

Make sure you've installed jquery. i.e npm i jquery --save

[stefanneculai]

@briankoech thanks for coming up with a solution.

[dodanex]

This is not working with Nuxt.js I have tested the example above. Is there another solution?

[ilhamsa1]

thanks is work .. btw dont forget add this code in top line ...

var webpack = require('webpack')
var path = require('path')