CODEWITHSUNDEEP
vue.jsvuejs3vuetifyjs3
Dion Snoeijen
Dion Snoeijen

Reputation: 333

Vuetify Could not find defaults instance

So, after running npm run build that contains: vite build.

With: "vuetify": "^3.0.0-beta.4" and "vue": "^3.2.31"

The built application gives this rather vague error:

Error: [Vuetify] Could not find defaults instance

Honestly I don't have a clue what this error means. Did anyone see this before? Or does anyone know what the "defaults instance" is?

This is the main.ts file:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import vuetify from "./plugins/vuetify";
import { loadFonts } from "./plugins/webfontloader";
import { createPinia } from "pinia";

loadFonts();

const pinia = createPinia();

createApp(App)
  .use(router)
  .use(vuetify)
  .use(pinia)
  .mount('#app');

This is inside plugins/vuetify.ts

// Styles
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import '../../node_modules/front-end-component-library/dist/style.css';

// Vuetify
import '@fortawesome/fontawesome-free/css/all.css';
import { createVuetify } from 'vuetify';
import {aliases, fa} from 'vuetify/lib/iconsets/fa';
import {mdi} from 'vuetify/lib/iconsets/mdi';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

export default createVuetify({
    components,
    directives,
    theme: {
        themes: {
            JLightTheme: {
                dark: false,
                colors: {
                    background: '#e3e4e0',
                    surface: '#FFFFFF',
                    primary: '#5A392D',
                    'primary-darken-1': '#3700B3',
                    secondary: '#4D5A58',
                    'secondary-darken-1': '#018786',
                    accent: '#e3e4e0',
                    error: '#B00020',
                    info: '#2196F3',
                    success: '#4CAF50',
                    warning: '#FB8C00',
                }
            },
        }
    },
    icons: {
        defaultSet: 'fa',
        aliases,
        sets: {
            fa,
            mdi
        }
    }
});

Upvotes: 6

Views: 13538

Answers (3)

Daniel Danielecki
Daniel Danielecki

Reputation: 10502

I had the issue when implementing GTM in Nuxt3 using Vuetify using https://github.com/zadigetvoltaire/nuxt-gtm plugin with AW-* tag name.

Submitted an issue for that repo, and let's see if/when it'll be fixed: https://github.com/zadigetvoltaire/nuxt-gtm/issues/15. Potentially, it could be a solution for some of you.

Upvotes: 0

Julisch
Julisch

Reputation: 418

I had the same error when trying to configure a unit test using Vitest and Vuetify.

I'll leave my solution here in case others come here too. I was able to solve my error by creating a new vuetify plugin in my test case file.

// test/helloworld.spec.ts
import { mount } from '@vue/test-utils'
import { expect, test } from 'vitest'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import HelloWorld from '../../src/components/HelloWorld.vue'

const vuetify = createVuetify({
  components,
  directives,
})

global.ResizeObserver = require('resize-observer-polyfill')

test('displays message', () => {
  const wrapper = mount({
    template: '<v-layout><hello-world></hello-world></v-layout>'
  }, {
    props: {},
    global: {
      components: {
        HelloWorld,
      },
      plugins: [vuetify],
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Components')
})

Upvotes: 3

BreizhReloaded
BreizhReloaded

Reputation: 50

It took me forever to find the solution: IconOptions type is wrong. Replace defaultSet with defaults in the icon options:

icons: {
  defaults: 'fa',
  aliases,
  sets: { fa, mdi }
}

Upvotes: 1

Related Questions