[FIXED] Why <v-stepper/> component not working properly in vuetify nuxt 3

Issue

I'm using vuetify3 in nuxt3, some code work but when a try to use the <v-stepper>...</v-stepper> component i get the following error :

✔ Nitro built in 533 ms
                                                                                                nitro 17:34:04
[Vue warn]: Failed to resolve component: v-stepper
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

I want to understand why. This is the code I used from the official doc :

<template>
    <v-container>
        <h1>Login</h1>

        <v-stepper v-model="e1">
            <v-stepper-header>
            <v-stepper-step
                :complete="e1 > 1"
                step="1"
            >
                Name of step 1
            </v-stepper-step>

            <v-divider></v-divider>

            <v-stepper-step
                :complete="e1 > 2"
                step="2"
            >
                Name of step 2
            </v-stepper-step>

            <v-divider></v-divider>

            <v-stepper-step step="3">
                Name of step 3
            </v-stepper-step>
            </v-stepper-header>

            <v-stepper-items>
            <v-stepper-content step="1">
                <v-card
                class="mb-12"
                color="grey lighten-1"
                height="200px"
                ></v-card>

                <v-btn
                color="primary"
                @click="e1 = 2"
                >
                Continue
                </v-btn>

                <v-btn text>
                Cancel
                </v-btn>
            </v-stepper-content>

            <v-stepper-content step="2">
                <v-card
                class="mb-12"
                color="grey lighten-1"
                height="200px"
                ></v-card>

                <v-btn
                color="primary"
                @click="e1 = 3"
                >
                Continue
                </v-btn>

                <v-btn text>
                Cancel
                </v-btn>
            </v-stepper-content>

            <v-stepper-content step="3">
                <v-card
                class="mb-12"
                color="grey lighten-1"
                height="200px"
                ></v-card>

                <v-btn
                color="primary"
                @click="e1 = 1"
                >
                Continue
                </v-btn>

                <v-btn text>
                Cancel
                </v-btn>
            </v-stepper-content>
            </v-stepper-items>
        </v-stepper>
    </v-container>
</template>

<script>
  export default {
    data () {
      return {
        e1: 1,
      }
    },
  }
</script>

My nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    css: ['vuetify/lib/styles/main.sass'],
    build: {
      transpile: ['vuetify'],
    },
    vite: {
      define: {
        'process.env.DEBUG': false,
      },
    },
})

My plugins/vuetify.js

// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

My package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --port=8001",
    "generate": "nuxt generate",
    "preview": "cross-env PORT=8001 node .output/server/index.mjs"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.4"
  },
  "dependencies": {
    "sass": "^1.53.0",
    "vuetify": "^3.0.0-beta.5"
  }
}

Solution

I have the same Problem with some Vuetify3 tags. It`s because of "Beta release" i mean. the next Release (Titan) should be soon published thats written on official Vuetify site. Well done im exited..

Answered By - Sersch

Answer Checked By - Willingham (PHPFixing Volunteer)

Read More

[FIXED] How to install and get started with Vuetify and Vue.js 3

Issue

Where can I find the new Vuetify version documentation that's compatible with Vue.js 3 and how do I install it and setup it using Vue cli :

In vue 2 we do :

vue create project-name

then :

vue add vuetify

How can we do that with Vue 3?

Solution

Before proceeding, it is important to note that this installation is intended primarily for testing purposes, and should not be considered for production applications.

You could follow the new documentation here and You could setup it as follows :

Create new vue project :

VUE CLI

vue create project-name

VITE

npm create vite project-name --template vue

Then change directory to the new created project to add vuetify

cd project-name

then

vue add vuetify

this changes the main.js file to :

import { createApp } from 'vue'
import vuetify from './plugins/vuetify'
import App from './App.vue'

const app = createApp(App)
app.use(vuetify)

app.mount('#app')

./plugins/vuetify

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'

export default createVuetify({
  components,
  directives,
})

You could fork this repository to get started

Answered By - Boussadjra Brahim

Answer Checked By - Willingham (PHPFixing Volunteer)

Read More

[FIXED] How to import custom svg icons in vuetify 3?

Issue

How to import custom svg icons in vuetify3 and nuxt3?

In vuetify 2, we were able to directly import svg icons like this

import customIcon from './myIcon.vue'
Vue.use(Vuetify)
export default new Vuetify({
  icons: {
    iconfont: 'mdi',
    values: {
      myIcon: {component: customIcon}
    },
  },
})

---------------

// Used like this in vue file
<v-icon>$myIcon</v-icon>

From veutfiy 3 documentation, I am confused about importing custom svg icons as it is using sets instead of values. https://next.vuetifyjs.com/en/features/icon-fonts/

// plugins/vuetify.js
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from "vuetify/iconsets/mdi";
export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi",
      aliases,
      sets: {
        mdi,
      },
    },
  });
  nuxtApp.vueApp.use(vuetify);
});

Solution

Found a way to use both mdi and custom svg icons

Icon file

//tickicon.vue
<template>
<svg>... icon here</svg>
<template>

//customSvgs.ts
import { h } from "vue";
import type { IconSet, IconProps } from "vuetify";
import tickIcon from "./customSVGs/tickicon.vue";
import closeIcon from "./customSVGs/close-icon.vue";

const customSvgNameToComponent: any = {
  tickIcon,
  closeIcon,
};

const customSVGs: IconSet = {
  component: (props: IconProps) => h(customSvgNameToComponent[props.icon]),
};

export { customSVGs /* aliases */ };

And my vuetify plugin file

// plugins/vuetify.ts
import { createVuetify } from "vuetify";
import { mdi } from "vuetify/iconsets/mdi";
import { customSVGs } from "~~/assets/customSVGs";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    icons: {
      defaultSet: "mdi",
      sets: {
        mdi,
        custom: customSVGs,
      },
    },
  });

  nuxtApp.vueApp.use(vuetify);
});

Using like that in vue file

<v-icon icon="custom:tickIcon"/> //Custom SVG Icon 
<v-icon icon="mdi-arrow-up"/>  //default mdi icon

Answered By - Rookie Coder

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)

Read More