Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

It's not clear how to include jQuery code #356

Closed
smth opened this issue Mar 7, 2017 · 22 comments

Comments

Projects
None yet
@smth
Copy link

commented Mar 7, 2017

I can't find anything in the docs about how to include snippets of JS or local JS files, that contain jQuery (I have jQuery itself included from a CDN). Whatever I have tried has resulted in errors ranging from $ is not defined to jQuery requires a window with a document. Any pointers?

This question is available on Nuxt.js community (#c308)
@awronski

This comment has been minimized.

Copy link
Contributor

commented Mar 8, 2017

Take a look at the How to add webpack plugins.

@smth

This comment has been minimized.

Copy link
Author

commented Mar 8, 2017

Hi @awronski

Yeah, I tried that already, in combination with plugins: ['~assets/js/my-file.js'], but got the jQuery requires a window with a document error.

@awronski

This comment has been minimized.

Copy link
Contributor

commented Mar 8, 2017

You need to check if you are executing your script in the browser:

if (process.BROWSER_BUILD) { ... }
@smth

This comment has been minimized.

Copy link
Author

commented Mar 8, 2017

OK, I think that's the part I'm missing. Which script? Could you elaborate.

@awronski

This comment has been minimized.

Copy link
Contributor

commented Mar 8, 2017

@smth

This comment has been minimized.

Copy link
Author

commented Mar 8, 2017

That's right.

I'm still not sure what to put into if (process.BROWSER_BUILD) { ... }.

I have tried

if (process.BROWSER_BUILD) {
   const webpack = require('webpack')
}

and

if (process.BROWSER_BUILD) {
   require('my-file')
}

and

if (process.BROWSER_BUILD) {
   const webpack = require('webpack')
   plugins: [
     '~assets/js/my-file.js'
   ]
}

None of which change the error.

I have also tried variations of

if (process.BROWSER_BUILD) {
   const webpack = require('webpack')
   plugins: [
     '~assets/js/my-file.js'
   ],
   build: {
     plugins: [
       new webpack.ProvidePlugin({
         '$': 'jquery'
       })
     ]
   }
}

which give a syntax error.

I'm not familiar enough with Vue directives to know how they can be a replacement for jQuery, but I essentially want to use it to add/remove classes.

@awronski

This comment has been minimized.

Copy link
Contributor

commented Mar 8, 2017

@smth

This comment has been minimized.

Copy link
Author

commented Mar 8, 2017

OK, so how should I be including it?

@awronski

This comment has been minimized.

Copy link
Contributor

commented Mar 8, 2017

@smth

This comment has been minimized.

Copy link
Author

commented Mar 8, 2017

So you can't use jQuery from a CDN?

OK, so now I have

const webpack = require('webpack')

module.exports = {
plugins: [
    '~assets/js/my-file.js'
  ],
build: {
    vendor: ['jquery'],
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery'
      })
    ]
}

But this doesn't seem to move things forward. I still get the same jQuery requires a window with a document error. And I still have not got anything inside if (process.BROWSER_BUILD) {} in the template.

@KonstantinVlasov

This comment has been minimized.

Copy link

commented Mar 8, 2017

Hi, @smth!
did you try this?

in nuxt.config.js

plugins: [
   '~plugins/my-jquery-code.js'
]

in plugins/my-jquery-code.js

if (process.BROWSER_BUILD) {
   const $ = require('jquery')
   $(function() {
      console.log('document ready!');
      // do whatever you want with html and jquery
   })
}
@ajcpwnz

This comment has been minimized.

Copy link

commented Mar 8, 2017

Here is my scenario how I made jquery work with nuxt.

  1. Install it from npm.
  2. import it in component which requires it. Like import $ from 'jquery'
  3. Call $ in all lifecycle hooks after created() and it works since document exists by that time. $ should also work in component methods.

P.S.
I tried using jquery to manipulate some classes and stuff in vue app, but it seems now that using vue and vuex features is more convenient. Most jquery usages can be refactored with help of store for global things and props if you need some data only locally in your components. Seems more vue-way for me.

@smth

This comment has been minimized.

Copy link
Author

commented Mar 8, 2017

I didn't @KonstantinVlasov, but that looks straight-forward and promising. I decided to go for a more Vue way, using directives for now. So I gave up on jQuery for the time being, but I'll probably revisit this at some point.

@ghost

This comment has been minimized.

Copy link

commented Mar 11, 2017

I use jQuery code in this way

<template>
<!-- Body -->
</template>

<script>
import $ from 'jquery'

export default {
  mounted: () => {
    // jQuery code
  }
}

</script>

@alexchopin alexchopin closed this Mar 14, 2017

@davodaslanifakor

This comment has been minimized.

Copy link

commented Dec 1, 2017

@alexchopin i cant understand how fix this problem?

@davidjor-hpan

This comment has been minimized.

Copy link

commented Jan 10, 2018

@smth I fixed that error by adding window as prefix ! No need webpack and npm !!!
just

window.$
@rlam3

This comment has been minimized.

Copy link

commented Jan 13, 2018

Following NuxtJS guidelines. I think we are supposed to install jquery via npm ? And include it via vendor?

https://nuxtjs.org/guide/plugins/

It would be included in all pages. Correct?

@farhadniaz

This comment has been minimized.

Copy link

commented Jan 15, 2018

You can add any external JS libraries in head option: https://nuxtjs.org/faq/

module.exports = {
head: {
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
],
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
]
}
}

@sudhir600

This comment has been minimized.

Copy link

commented May 8, 2018

Hi @awronski,

I have 10 dymanic form (see img). each form has (-) and (+) button with one text box. i want to increase and decrease when being click respective by button. I am able to achieve this by jquery easly (.parent.find...)

but i am really cluless how to do the same with properly vuejs style. i am using Nuxt.

image
Any help pls

@rayGobel

This comment has been minimized.

Copy link

commented May 23, 2018

@sudhir600 Hi sudhir, you can use data binding in vue js. Supposed you have the following component with button:

<template>
    <p>{{ amount }}</p>
    <a class="btn" href="#" v-on:click="increaseAmount()">Plus (+)</a>
    <a class="btn" href="#" v-on:click="decreaseAmount()">Minus (-)</a>
</template>

<script>
export default {
  data () {
    return {
      amount: 0
    }
  },
  methods: {
    increaseAmount () {
      this.amount = this.amount + 1
    },
    decreaseAmount () {
      this.amount = this.amount - 1
    }
  }
}
</script>

Then, you should render each product in those image to each different component. See Component Basics#BaseExample on vue.js guide.

@sudhir600

This comment has been minimized.

Copy link

commented May 30, 2018

unfortunately, this.amount is not affecting in the textbox. when i console.log, i get increment number but textbox doesn't (added v-model)

So finally i use plain javascript (document.getElemntById().....)

@lock

This comment has been minimized.

Copy link

commented Nov 1, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Nov 1, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.