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...// })
javascriptvue.jsnuxtjs

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of AC_FL_RunContent is failing after an UpdatePanel postback

In the code for the repeater item, I have a JavaScript function that calls AC_FL_RunContent to display a flash file when a link within the repeater item is clicked. The datasource I am using displays the first page of video links with five items per page, ...

javascriptjqueryasp.netflashupdatepanel

What could be causing the PAGE CSS to malfunction?

I am looking to export HTML text as a word document with A4 size and portrait orientation. My JavaScript currently allows me to export the text, but it appears like a webpage format rather than in A4 or portrait mode. I have tried adding @page CSS styling ...

javascripthtmlcss

Can you explain the significance of this code snippet 'true <=> false'?

Today I came across this piece of code: true <=> false. I'm a bit confused by it and don't really understand how it works. If anyone could shed some light on this expression for me, I would greatly appreciate it. For reference, this code ...

javascriptangulartypescript

Incorporating asynchronous file uploads to a server using a for loop

I am in the process of transforming my original code into "async" code. The initial code queries the database and retrieves the results, which includes images. I want to optimize writing the images asynchronously to my nodejs server as the current synchro ...

javascriptnode.jsasynchronous

"Access denied" error when using Internet Explorer and jQuery

Attempting to make an AJAX call using jQuery's $.post in Internet Explorer is resulting in an error message stating "Permission denied." This peculiar issue only seems to occur when accessing a page after having visited another page. For example, if ...

javascriptjqueryajaxinternet-explorer

Major Technical Issues Plague School-wide Celebration

In my JavaScript code, I am creating a 16x16 grid of divs. Each div should change its background color from black to white when the mouse enters (inherited based on a common class). However, I am facing an issue where all the divs change color simultaneou ...

javascriptclasseventsmouseenter

Variations in speed with closely related jQuery expressions in Internet Explorer

When running in Internet Explorer, test the performance of executing an expression like: $('div.gallery div.product a"); against a similar expression: $('div.gallery').find("div.product").find("a"); It has been found that sometimes the s ...

javascriptjquery

Is there a way to display the output of jQuery in an input box rather than a span?

I need to display the result of this function in an input box instead of a span tag because I plan to utilize the result in the following form. function checkChange(){ $.ajax({ url: "ordercalculate.php", data: $('form').seria ...

javascriptjqueryhtmlcalculated-field

What is the best way to establish anchors for *ngFor elements in Angular 2 and beyond?

I have a component that displays items using *ngFor. My goal is to scroll down to the element with anchor #3. Here's the code snippet: @Component({ selector: 'my-app', template: ` <button (click)="scroll(3)">scroll 2</butt ...

javascripthtmlangularscrollngfor

Leverage the power of Angular CLI within your current project

I am currently working on a project and I have decided to utilize the angular cli generator. After installing it, I created the following .angular-cli file: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": " ...

javascriptangularangular-cli

Transforming jQuery code to pure vanilla Javascript

For my project, I decided to convert my jQuery code into native JavaScript. The goal is to eliminate the dependency on jQuery and achieve the same functionality. The current setup involves two pages - page.html and side.html. The page.html document fetches ...

javascriptjqueryhtml

Simplified JavaScript Object Structure

A JSON array that is flat in structure looks like this: var flatObject = [ { id : "1", parentId : "0", name : "object 1" }, { id : "2", parentId : "1", name : "object 2" }, { id : "3", parentId : "2", name : "object 3" }, { id : "4", pare ...

javascriptjson

Is it possible to retrieve the parent object?

My code snippet is as follows, and I'm struggling to access the data object from within the innerFn function. Is there a way to accomplish this? export default { data: { a: "a", b: "b" }, fn: { innerFn: () => co ...

javascriptnode.jsvue.jsnuxt.js

Arranging data in Ember: sorting an array based on several properties in different directions

Is it possible to sort a collection of Ember Models by multiple properties, where each property can be sorted in different directions? For example, sorting by property a in ascending order and by property b in descending order? Update I attempted to use ...

javascriptsortingember.js

Activate a CSS class on click using JavaScript

Having a bit of trouble as a beginner with this. Any help would be much appreciated. This is the code in question: HTML: <div class='zone11'> <div class='book11'> <div class='cover11'></d ...

javascriptjquerycssanimationonclick

Retrieving an array using the $.post() method

I am utilizing the following code: $.post('fromDB.php', function(data) { eval(data); console.log(data); updateTimer(); }); In order to retrieve arrays from PHP. This is what PHP returns: var todayTimeMinutes = [0, 45, 35, 25, 40, 0 ...

phpjavascriptarraysdebuggingjquery

Convert require imports to Node.js using the import statement

Currently learning NodeJs and encountering a problem while searching for solutions. It seems like what I am looking for is either too basic or not much of an issue. I am working on integrating nodejs with angular2, which involves lines of code like: impo ...

javascriptnode.jsimportnpmrequire

Unable to load the node modules

In my development journey, I created an ASP.NET MVC project using Angular 2 in Visual Studio 2017 and set up node for package management. Here is a snippet from the package.json file: { "version": "1.0.0", "name": "asp.net", "private": true, ... ...

javascriptnode.jsasp.net-mvcangulartypescript

Executing ts-node scripts that leverage imported CSS modules

Is there a way to execute scripts that utilize css modules? I am currently working on a typescript migration script that I would like to execute using ts-node. The ideal scenario would be to keep the script's dependencies separate from the React comp ...

javascripttypescriptwebpackts-node

Guide on removing the loading percentage spinner from a Nuxt.js application

When visiting my website chateg with a slow internet connection, you may notice a rounded spinner with a percentage counter near the "Enter chat" button. Is there a way to remove this feature? ...

vue.jsnuxt.js