Create a prototype class in NuxtJS Vue

Question

Create a prototype class in NuxtJS Vue

What is the correct way to set a class to prototype in Vue NuxtJS?

I have created a plugin

Here is my nuxt.config.js file:

plugins: [
    { src: "~/plugins/global.js" },
],

The global.js file contains:

import Vue from "vue";
import CustomStore from "devextreme/data/custom_store";

// Trying to set it in the prototype
Vue.use(CustomStore)

However, I encounter an error that says:

A class must be instantiated using the 'new'

Although I know this approach is incorrect, I cannot find any resources on how to properly initialize it. One attempt was:

Vue.use(new CustomStore());

This removes the error, but how do I call it?

My aim is to use something like this in my component:

this.dataSource = this.$CustomStore({ ///... settings...// })

javascript vue.js nuxtjs

Answer 1

Answer №1

It seems like CustomStore is a function, so you may want to consider utilizing the Nuxt.js inject() method. By using this method, you can make your functions or values accessible throughout your application.

~/plugins/global.js

export default ({ app }, inject) => {
  // Inject $CustomStore() in Vue, context and store.
  inject('CustomStore', CustomStore)
}

Afterwards, you will be able to use it in various components of your application.

Your Component

 mounted() {
   this.$CustomStore()
 },

For more information, you can refer to https://nuxtjs.org/docs/2.x/directory-structure/plugins#inject-in-root--context

Answer 2

It seems like CustomStore is a function, so you may want to consider utilizing the Nuxt.js inject() method. By using this method, you can make your functions or values accessible throughout your application.

~/plugins/global.js

export default ({ app }, inject) => {
  // Inject $CustomStore() in Vue, context and store.
  inject('CustomStore', CustomStore)
}

Afterwards, you will be able to use it in various components of your application.

Your Component

 mounted() {
   this.$CustomStore()
 },

For more information, you can refer to https://nuxtjs.org/docs/2.x/directory-structure/plugins#inject-in-root--context

Create a prototype class in NuxtJS Vue

Answer №1

Similar questions

Global registration of single file components is necessary to utilize them across

After refreshing the page, the ngRoute white page is displayed

Enhance your VueJS and Tailwind development with dynamic classes and variables

Countdown component in Ant Design failing to display correct date

Tips for implementing a document ready function on a nested page within a larger full-page website

Adding multiple variables in jQuery: A guide to mimicking the .= operator from PHP

Using a loop to execute Javascript Promise.all()

Drawing intersecting lines on a javascript canvas and clearing them using the lineto method

Navigating to the default landing page using basic authentication middleware in Express

Encountered a problem when incorporating delay functions into redux-saga testing using the Redux Saga Test Plan library

How is it that my initial response appears correct in the first log, but then suddenly changes to a 1?

Navigating to a specific section within a page containing multiple sections in Vuejs: How to access the route and unique identifier

Tips for implementing camera animation to focus on a specific area of a gltf model when it is clicked in three.js

Having trouble with the npm package installation for react-circular-progressbar

AWS Lambda applies quotes to create the event input

What are the steps to generate an npm package along with definition files?

"Implementing a dynamic way to assign values to different item types in React

Implementing Vue.js functionality to dynamically add or remove values from an array based on the state of a checkbox

Pass data to PHP using AJAX

Having trouble with JQuery blur and enter key functionality not working properly