6

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
        }
    }
});
Improve this question
5
  • please share the main.js file Commented Jun 30, 2022 at 9:23
  • 1
    Sure, done that :) Commented Jun 30, 2022 at 9:42
  • Vuetify 3 is currently in beta. This means it's not stable and its behaviour can change from day to day. Please report any issues using Support > File a bug report on their website. Why? Because on Stack Overflow you're more likely to get answers from people who used Vuetify (e.g: v2) a lot, rather than people actively involved in developing the new version (e.g: v3). Commented Jun 30, 2022 at 9:57
  • Yeah I know. We took a chance since they promised to release a long while ago. I guess we will have to see then. Thanks. If anyone has this issue before, I would still be very interested if a solution comes up. Commented Jun 30, 2022 at 10:12
  • Try to comment the options of theme Commented Jun 30, 2022 at 10:19

3 Answers 3

Reset to default
3

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')
})
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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 }
}
Improve this answer

5 Comments

I have the same issue, it helps by not having this error, but the icons don't work as it doesn't add any classes to icon element.
Did you add the required FontAwesome imports?
I fixed the issue by not using vite-plugin-vuetify as it's still buggy at the moment so I have to import components manually from vuetify/components. It has nothing to do with icons.
In my case I stopped using @vue/compat, and that worked too (instead of removing vite-plugin-vuetify)
Mine was just miss configured. Found the right config by checking this working example. Especialy ./vite.config.ts and ./src/main.ts
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.