Setting up a custom global variable in nuxt.js using vuetify

Question

Setting up a custom global variable in nuxt.js using vuetify

As I work on developing my app with Nuxt, I find myself frustrated by the need to constantly write an if statement in my pages using this.$Vuetify.breakpoint.name == 'xs' for handling responsiveness. Instead, I want to create my own variable for easier access. Below is the code snippet:

(mynuxtapp/plugins/createCustomVar.js)

  
import Vue from "vue";

Vue.prototype.$bp = Vue.prototype.$vuetify.breakpoint.name;
console.log(Vue.prototype.$bp);

I have ensured that the plugin runs in my nuxtconfig file, but unfortunately, it returns an error: TypeError: Cannot read property 'breakpoint' of undefined. It seems like I am unable to access Vuetify using "$", even though I can do so in my pages.

What steps should I take next? Are there any simpler methods or best practices that I should consider? Thank you for taking the time to read through my question!

javascript vue.js nuxt.js vuetify.js

Answer 1

Answer №1

The $vuetify property is found on the Nuxt context, not the Vue prototype.

When creating a module under plugins/, it should return a function that takes the Nuxt context as its first argument. This context includes the $vuetify object set up by the @nuxtjs/vuetify plugin.

The second parameter of the Plugin API is inject, which enables you to inject global variables into the Nuxt context.

Your plugin implementation should resemble this example:

// ~/plugins/myGlobals.js
export default ({ $vuetify }, inject) => {
  // inject makes `$bp` accessible in the context (the `$` prefix is automatically added)
  inject('bp', $vuetify.breakpoint.name)
}

demo

Answer 2

The $vuetify property is found on the Nuxt context, not the Vue prototype.

When creating a module under plugins/, it should return a function that takes the Nuxt context as its first argument. This context includes the $vuetify object set up by the @nuxtjs/vuetify plugin.

The second parameter of the Plugin API is inject, which enables you to inject global variables into the Nuxt context.

Your plugin implementation should resemble this example:

// ~/plugins/myGlobals.js
export default ({ $vuetify }, inject) => {
  // inject makes `$bp` accessible in the context (the `$` prefix is automatically added)
  inject('bp', $vuetify.breakpoint.name)
}

demo

Answer 3

Answer №2

Why not start by logging out the context object to see what you have? It's possible that the Vuetify object is located elsewhere.

export default (context, inject) => {
  console.log('context:', context)
}

For more information on setting plugins, check out the documentation here

Answer 4

Why not start by logging out the context object to see what you have? It's possible that the Vuetify object is located elsewhere.

export default (context, inject) => {
  console.log('context:', context)
}

For more information on setting plugins, check out the documentation here

Setting up a custom global variable in nuxt.js using vuetify

Answer №1

Answer №2

Similar questions

Sharing data between view and controller in Laravel: a guide

JavaScript: Transforming binary information from Uint8Array into a string causing file corruption

bootstrap used for creating horizontal radio buttons

Tips for launching a fresh window and embedding HTML into it with jQuery?

What is the best way to find a partial string match within an array of objects when using Jest?

Shuffling images in JavaScript using z-index for a dynamic deck effect

Stop the removal of the CSS content property

Utilize Jade to showcase information within an input field

The correct terminology for divs, spans, paragraphs, images, anchor tags, table rows, table data, unordered lists, list

Generate an adjustable grid layout (with rows and columns) to display information retrieved from an API request

Tips for Angular4: ensuring ngOnDestroy completion before navigation

What methods are available to load sections of a complex SVG shape asynchronously?

Sending an integer through an AJAX request without relying on jQuery:

Personalized configurations from the environment in the config.json file

What could be causing my SVG bezier curves to malfunction in Firefox?

I am interested in sending an email from a PDF document based on the selected check boxes

Customize v-text-field label styling using Vuefity translate

Is there a way to restrict a user to selecting just one checkbox in a bootstrap checkbox group?

What is the best way to display data retrieved through Ajax, jQuery, and JavaScript on an HTML page

How to add data to Laravel after successful ajax request