Getting jQuery not defined error on NUXTJS

[cvsraghava]

Installation in NUXTJS "npm install vue-trumbowyg --save"

Included a Plugin into NUXT config

import Vue from 'vue'
import VueTrumbowyg from 'trumbowyg'
import 'trumbowyg/dist/ui/trumbowyg.css'
Vue.use(VueTrumbowyg)

HTML code

<template>
  <div>
    <trumbowyg v-model="content" :config="config" class="form-control"></trumbowyg>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        content: '',
        config: {
        }
      }
    }
  }
</script>

Included jQuery on NUXT config**

    script: [
      { src: 'https://unpkg.com/jquery@3.2.1/dist/jquery.min.js' }
    ],

Finally, I am getting error jQuery not defined.

Can anyone please support on this.

[ankurk91]

I never used this vue component in nuxt.js. I have no idea on how to include jQuery plugins in nuxt.js You can google about it. Here are some related issues https://github.com/nuxt/nuxt.js/issues/356 https://github.com/nuxt/nuxt.js/issues/178

I think you are missing this piece of code.

// webpack config
plugins: [
    new webpack.ProvidePlugin({  
      jQuery: 'jquery',
      $: 'jquery',
      'window.jQuery': 'jquery',
    }),
  ],

[ankurk91]

ping @cvsraghava

[bennettfrazier]

I never used this vue component in nuxt.js. I have no idea on how to include jQuery plugins in nuxt.js You can google about it. Here are some related issues nuxt/nuxt.js#356 nuxt/nuxt.js#178

I think you are missing this piece of code.

// webpack config
plugins: [
    new webpack.ProvidePlugin({  
      jQuery: 'jquery',
      $: 'jquery',
      'window.jQuery': 'jquery',
    }),
  ],

I know this is old but for anyone referencing - make sure you put this plugin under build: {}

build: {
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
}

[ShisunXia]

Hi @bennettfrazier , I am also trying to integrate this component in Nuxt js. However, it still shows 'jQuery is not defined' after adding the jquery to the plugins list as you described. Below is my build:

build: {
    transpile: [/^vue-trumbowyg($|\/)/],
    vendor: ['jquery'],
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
}

I also created a trumbowyg.js file under the plugins folder:

import Vue from 'vue'
import VueTrumbowyg from 'vue-trumbowyg'
import 'trumbowyg/dist/ui/trumbowyg.css'

Vue.use(VueTrumbowyg)

Eventually, I added this line to the plugins list in the nuxt.config.js

plugins: [
        ...
        '~/plugins/trumbowyg.js'
    ],

Thanks in advance.

[misaki1301]

having same issues after reading webpack guide setup

module: {
      rules: [
        {
          test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
          loader: 'file-loader?name=[name].[ext]?[hash]',
        }
      ],
    plugins: [
      new webpack.ProvidePlugin({
        Vue: ['vue/dist/vue.esm.js', 'default'],
        jQuery: 'jquery',
        $: 'jquery',
        'window.jQuery': 'jquery',
      }),
    ],

[ShisunXia]

having same issues after reading webpack guide setup

module: {
      rules: [
        {
          test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
          loader: 'file-loader?name=[name].[ext]?[hash]',
        }
      ],
    plugins: [
      new webpack.ProvidePlugin({
        Vue: ['vue/dist/vue.esm.js', 'default'],
        jQuery: 'jquery',
        $: 'jquery',
        'window.jQuery': 'jquery',
      }),
    ],

Hi, I solved my issue by adding mode: 'client' to the plugins importing line. Try to import the plugin in this way: { src: '~/plugins/trumbowyg.js', mode: 'client'}. This is the reference in the documentation.

[vmangelovv]

i have same issue with nuxtjs. - > this.el.trumbowyg is not a function HELP

my plugin/trumbowyg.js

import Vue from 'vue';
import VueTrumbowyg from 'vue-trumbowyg';
import 'trumbowyg/dist/ui/trumbowyg.css';
Vue.use(VueTrumbowyg);

in nuxt.config.js { src: '~/plugins/trumbowyg', mode: 'client' },

and in my .vue file

<template>
  <div>
    <client-only>
      <trumbowyg v-model="content" :config="config" class="form-control"></trumbowyg>
    </client-only>
  </div>
</template>

<script>
export default {
  layout: 'admin',
  data() {
    return {
      content: '',
      config: {},
    };
  },
  methods: {},
};
</script>