error on adding component to the page

[nikocraft]

I'm submitting a ... (check one with "x")

[x ] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

I just installed the editor in my project and init it like this:

<trumbowyg :id="'editor-'+uniqueId" v-model="blockContent"></trumbowyg>

and I get this when I add it to the page [Vue warn]: Error in mounted hook: "TypeError: this.el.trumbowyg is not a function" no toolbar is visible and only textarea is visible.

[ankurk91]

Are you using webpack? If so can you please check for this config

new webpack.ProvidePlugin({
      Vue: 'vue',
      jQuery: 'jquery',
      $: 'jquery',
    }),

https://github.com/ankurk91/vue-trumbowyg/blob/master/webpack.config.dev.js

[nikocraft]

hmm I have it in package.json included like this:

"dependencies": { ...some other stuff here... "vue-trumbowyg": "^1.0.3",

I'm not sure about stuff you mention and where to check for it. I see that you are familliar with Laravel, I am using it in Laravel project.

[ankurk91]

If you are not using webpack then you need to include jQuery on your html . Instructions can be found in readme file

[nikocraft]

I am using webpack I belive, whatever is Laravel configured out of box is what I am using and I belive its webpack. And I have jQuery in my html as well.

[nikocraft]

check this: https://maxniko.tinytake.com/sf/MTk4NDQ1Ml82Mjc5Mjgw

[ankurk91]

Okay, then you need to read this https://github.com/JeffreyWay/laravel-mix/blob/master/docs/autoloading.md

[nikocraft]

great thanks for your help and your contibutions to the vue community with these components :) anyways I do have opensource project in works but if you are busy then well good luck :)

[ankurk91]

Let me know if you need more help in get this component worked in Laravel mix.

[ankurk91]

I will write a small wiki on how to use this package in Laravel mix. Closing; feel free to re-open. P.S. https://github.com/ankurk91/vue-trumbowyg/wiki/Laravel-Mix

[nikocraft]

you are one of a kind! :)

[nikocraft]

Btw I do not have this file in my project: webpack.mix.config.js Do I have to manyally create it and where should I put it?

inside my webpack.mix.js I have this:

mix.webpackConfig({
  resolve: {
    alias: {
      components: path.resolve(__dirname, './resources/assets/js/components'),
      utils: path.resolve(__dirname, './resources/assets/js/utils')
    }
  },
  plugins: [
    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en'),
    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]src[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/src/locale/lang/en'),
    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]packages[\/\\]scrollbar/, 'element-ui/lib/scrollbar')
  ]
});

is that part of the same thing, could I put that code in there or do I need this config file?

[ankurk91]

Ah, there was a typo, should be fixed now. There is only one file webpack.mix.js that need to be configured.

[nikocraft]

battleship operational: https://maxniko.tinytake.com/sf/MTk4NjE0MF82MjgzMzgy

thank you for your help!