CODEWITHSUNDEEP
javascriptvue.jsnpmnuxt.js
gsundberg
gsundberg

Reputation: 547

Using NPM packages client-side with nuxt

I'm very new to nuxt and javascript and I'm trying to figure out how to use my app's dependencies client-side. I have them listed in my nuxt.config.js and installed with npm. I also have a file in the /plugins directory that imports them (not sure if this is good or not). Here is where I run into trouble: I have two scripts located in my /static directory that need to take advantage of my npm packages. Putting an import statement in those scripts causes an error. Importing the packages in the script section of the page vue file also doesn't work. How can I use npm packages in scripts that are included in pages client-side?

Upvotes: 4

Views: 9269

Answers (1)

Alexey Nazarov
Alexey Nazarov

Reputation: 41

Can you provide a more information, about which kind of error is happening and which kind of packages did you try to install?

In this example I am going to show you how I included in my nuxt project npm package vuelidate

after installing vuelidate:

  1. add to nuxt.config.js
plugins: [
   { src: "~/plugins/vuelidate", mode: "client" },
 ],
  1. create vuelidate.js file in my plugin folder (plugin/vuelidate.js)
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate);
  1. after that I can use vuelidate in my .vue components (no always necessary to import something because in our 2 stage Vue.use(Vuelidate) we already installed vuelidate globally)
<script>
import { required, minLength } from "vuelidate/lib/validators";

export default {
  name: "OrderByLinkForm",
  components: {},
  ...
};
</script>

Upvotes: 1

Related Questions