The function _plugins_vuetify__WEBPACK_IMPORTED_MODULE_136__.default is not usable as a constructor

I have created a Vue application using vue cli 3 and incorporated Vuetify. To optimize the size of my bundle, I decided to modify the way Vuetify is imported:

The versions I am working with are vuetify 1.5.5 and vue 3.7.0

import Vue from 'vue';
import Vuetify, { VLayout, VBtn, VApp } from 'vuetify/lib';
import 'vuetify/src/stylus/app.styl';

Vue.use(Vuetify, {
  components: {
    VApp,
    VLayout,
    VBtn,
  },
  theme: {
    primary: '#ee44aa',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107',
  },
  options: {
    customProperties: true,
  },
  iconfont: 'md',
});

export default Vuetify;

However, upon making this change, I encountered the following error in the console: https://i.sstatic.net/dSXrF.png

javascriptvue.jswebpackvuetify.js

Answer №1

Here's a tip: avoid writing 'export default Vuetify;' in your code. Instead, treat vuetify.js as a JavaScript file that needs to be imported in your main.js.

// plugins/vuetify.js


import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
iconfont: 'md',
  theme: {

primary: colors.green.base, // #4CAF50

secondary: colors.red.lighten4, // #FFCDD2

accent: colors.indigo.base, // #3F51B5

search: colors.grey.lighten2, // #E0E0E0

searchButton: colors.green.lighten3,  // #A5D6A7

newsBlock: colors.grey.lighten4, // #F5F5F5

// info: colors.lighten1,

// warning: colors.darken2,

// error: colors.accent4,

// success: colors.lighten2,

  }
})


// main.js

import Vue from 'vue'
import './plugins/vuetify'
...
new Vue({
  el: "#app",
  router,
  store,
  render: h => h(App),
})

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

What is the origin of function parameters in javascript?

I have implemented the following code: handleOwnerMode = ownerChecked => { this.setState(prev => ({ ownerChecked, showOwner: !prev.showOwner})) // this.setState(prev => ({ ownerChecked: !prev.ownerChecked, showOwner: !prev.showOwner ...

javascriptreactjs

Utilize the Spotify API to discover tracks by including the album title and artist's name in the search

Currently working on a project that involves searching for a music track on Spotify. The idea is to input the track name in the text area and generate a list of matching Track IDs along with Artist Names, Album Names, and Artwork. I have made some progress ...

javascripthandlebars.jsspotify

Unable to refresh the view from the controller once the promise has been resolved

On my webpage, I want to display a dynamic list of items that updates whenever the page is refreshed. To achieve this, I am using Parse to store and retrieve my items using promises. Here's a simplified example of how it works: When the index.html pa ...

javascriptangularjsparse-platformangularjs-scopepromise

Updating a route in Next.js? Make sure to remove the classList as you

Looking to remove a specific class whenever the route changes in Next.js, I've attempted the following approach: React.useEffect(() => { const activatedLink = router.query.tags const classActivated = document.querySelector('.'+activated ...

javascriptreactjsnext.js

Looking for a skilled JavaScript expert to help create a script that will automatically redirect the page if the anchor is changed. Any t

Seeking a Javascript expert, In my custom templates, I have used a link as shown below: <a href='http://www.allbloggertricks.com'>Blogging Tips</a> I would like the page to redirect to example.com if the anchor text is changed from ...

javascriptjqueryhtmlredirect

What is the process for loading an external file within an npm script?

Objective: Testing the linting process of specific components within the source code, without affecting all files. I want to streamline the linting process by running a single command that covers multiple folders specified in a configuration file: //pack ...

javascriptnode.jsnpmeslint

Retrieve and access an array of objects from MongoDB

Assuming I have some data stored in MongoDB as follows - [ { _id: new ObjectId("63608e3c3b74ed27b5bdf6fa"), latitude: 24.3065, hotels: [ { name: "Saunders Oconnor", lat ...

javascriptnode.jsmongodbexpress

Having trouble with TypeScript error in React with Material-UI when trying to set up tabs?

I have developed my own custom accordion component hook, but I am encountering the following error export default const Tabs: OverridableComponent<TabsTypeMap<{}, ExtendButtonBase<ButtonBaseTypeMap<{}, "button">>>> Check ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Sorting `divs` based on the number of user clicks in JavaScript: A simple guide

I've implemented a script that tracks the number of clicks on each link and arranges them based on this count... Currently, everything is functioning correctly except when the <a> tags are nested inside a div. In such cases, the script ignores ...

javascripthtmlcss

Import the information into a td tag's data-label property

I have implemented a responsive table design that collapses for smaller screens and displays the table header before each cell. body { font-family: "Open Sans", sans-serif; line-height: 1.25; } table { border: 1px solid #ccc; border-collapse: co ...

javascripthtmlcsshtml-tableresponsive

Dynamic Dropdown Selections with AJAX

After exploring various resources, I found a solution for creating a multiple drop-down menu on this site: Roshan's Blog The implementation is mostly successful, except for an issue with the third drop-down box. (Dropdown1: Clients, Dropdown2: Loca ...

phpjavascripthtmlajaxdrop-down-menu

Use the npm-search feature to show only the name and description columns in the search results

After running the command npm search packagename, I noticed that the results are shown in 6 columns: name, description, author, date, version, and keywords. Is there a way to customize npm-search so that it only displays the name and description columns? ...

javascriptjsonnpm

How is it possible that this event listener is able to capture an event that was already sent before it was

I am facing an issue with my Vue JS code. When I click on the account <a> tag, it triggers the toggle method. The toggle method adds an event listener to the document. However, as soon as the toggle method is executed, the event listener fires and ...

javascriptvue.js

When clicking on a drink, I prefer not to provide the ID data. The CocktailDB API is being used with nuxt.js

Greetings! I am currently working on a cocktail app to enhance my skills in Nuxt.js and Axios, utilizing the CocktailDB API available at . Within drinks/index.vue, all drinks are listed using v-for. Upon clicking on a specific drink, you will be redirected ...

vue.jsaxiosnuxt.jsinfo

What is the best way to create a redirect in Nuxt.js using a component method instead of the fetch method?

I'm currently working with nuxtjs and I am trying to figure out how to redirect the user after they have logged in. I've been having trouble getting the redirect() method to work within my function: loginUser: function () { if (this.isValid ...

node.jsvue.jsvuejs2nuxt.js

NodeJS npm module installed globally is unable to run the main/bin JavaScript file using node command

Here is an example of my package.json: { "name": "example-module", "version": "1.0.0", "bin": "./bin/example-module.js", "main": "./bin/example-module.js", "description": "Example module description", "homepage": "http://my.home.page.com", " ...

javascriptwindowsnode.jsnpm

I am struggling to get the pop-up to close using the current code. I suspect that the issue might be related to the variable I was previously using in WordPress. I have made changes but the pop-up

While delving deeper into the realm of Javascript, I encountered a stumbling block with a single popup intended for the main page of a WordPress website I am constructing. Despite my attempts to modify the code's variables, they seem unyielding. Surpr ...

javascripthtmlcss

It appears that req.session is not defined and the user_id within req.session is not

Currently, I am implementing session management with Express and Node using HTTPS. I am facing an issue where I need to create a session in Express for authentication before redirecting to static files in the public folder. Previously, I encountered a prob ...

javascriptnode.jssessioncookiesexpress

Creating a formatted JSON string from the data retrieved using a GET request and embedding it into an HTML template to be sent as the

Struggling to send JSON data retrieved from a GET METHOD as an email. The challenge is defining the body of the email using the obtained JSON object. Looking for solutions! Below is a snippet of my code: app.get('/userinfo',(req,res)=>{ ...

javascriptnode.jsexpress

What is the best way to invoke a TypeScript function within a jQuery function?

Is it possible to invoke a TypeScript function within a jQuery function? If so, what is the correct approach? Here is an example of my component.ts file: getCalendar(){ calendarOptions:Object = { height: 'parent', fixedWeekCount : ...

javascriptjqueryangulartypescript