CODEWITHSUNDEEP
javascriptvue.jsnpmnuxt.js
SeriousLee
SeriousLee

Reputation: 1371

Nuxt.js - Globally import custom NPM packages

Nuxt's plugins/modules system is extremely complicated and as such I've not been able to accomplish this very simple task, even after looking at some other answers here on SO. I've installed the NPM package csv-parse (found here), then I created a file in my project's plugins directory named csv-parse.js, in which I put the following code:

import Vue from 'vue';
import CsvParse from 'csv-parse';
Vue.use(CsvParse);

Then I added { src: "~/plugins/csv-parse", mode: "client" } to the plugins array in my nuxt.config.js (I only need to use this package client-side).

As far as Nuxt's documentation and the other SO answers will have you believe, you should now be able to use this package globally in your components, but no one cares to show how to use it in your component. Here's what I've tried:

// @/components/Hospitals/Crud.vue
...
<script>
  export default {
    methods: {
      parseFileData() {
        console.log('parser:', CsvParser);       // ReferenceError: CsvParser is not defined
        console.log('parser:', $CsvParser);      // ReferenceError: $CsvParser is not defined
        console.log('parser:', this.CsvParser);  // undefined
        console.log('parser:', this.$CsvParser); // undefined
      }
    }
  }
</script>
...

Can someone please clear the mystery of how to globally use custom NPM packages in a Nuxt project?

Upvotes: 3

Views: 3954

Answers (1)

kissu
kissu

Reputation: 46814

You followed the answers well and imported the package successfully here IMO (on client side only).

For your main question, people do not explain how to use it globally because it's usually dependant of the package itself. For a quick demo, here is my vue-vee-validate.js file

import Vue from 'vue'
import { ValidationProvider, ValidationObserver } from 'vee-validate'

export default ({ app }) => {
  Vue.component('ValidationObserver', ValidationObserver)
  Vue.component('ValidationProvider', ValidationProvider)
}

Following the official docs, it should be imported like this and used like that in my Nuxt project (after the plugin install)

<ValidationProvider v-slot="v">
  <input v-model="value" type="text">
</ValidationProvider>

So, even if the initial setup is not exactly the same because you're bringing it into Nuxt, the end result is the same. If you can achieve to make it work in any basic ES6 project, you can use the same way after a plugin import in Nuxt.

So here, for your node-csv-parse, if you can achieve to make it work in a NodeJS project, you may use it as easily here too. Yep, you read it correctly, your project is aimed towards Node at first. And therefore, it should not work in the browser. You can probably try to use it with Browserify or to find an alternative (browser-ready) package that does that.

Still, in node it should work as told in the docs

var csv = require('csv');
var generator = csv.generate({seed: 1, columns: 2, length: 20});

So, Browserify should help use it in a similar manner when transformed into a browser compatible bundle (and imported in your csv-parse.js file).

PS: CSV operations may be heavy and could maybe use some backend for the computing, then sent to the frontend maybe ?

PS2: Nuxt is still a NodeJS server at the end, so you could maybe just run your CSV operations on the server side only, then give it somehow to your client. Not sure how to do that.

Upvotes: 2

Related Questions