0

I created a project in stable Nuxtjs3 with vuetify3 templating framework. I can set prepend icon or inner icon nothing is displayed, with mdi or font awesome. No error in console, no error in server. I just want to add icons on input form

<template>
<div>
    <v-app id="inspire">
        <v-container fluid fill-height>
            <v-row vertical-align="center">
                <v-col lg="6" sm="12" align-self="center" offset-lg="3">
                    <v-card class="elevation-12">
                        <v-toolbar dark color="success">
                            <v-toolbar-title>Se connecter</v-toolbar-title>
                        </v-toolbar>
                        <v-card-text>
                            <Form as="v-form" @submit="onSubmit" :validation-schema="schema" >
                                <Field name="username" v-slot="{ field, errors }">
                                    <v-text-field
                                        label="Login"
                                        type="email"
                                        v-bind="field"
                                        variant="solo"
                                        append-inner-icon="mdi-magnify"
                                        :error-messages="errors"
                                    ></v-text-field>
                                </Field>
                                <Field name="password" v-slot="{ field, errors }">
                                    <v-text-field
                                        id="password"
                                        prepend-inner-icon="fa:fas fa-lock"
                                        label="Password"
                                        type="password"
                                        v-bind="field"
                                        variant="solo"
                                        :error-messages="errors"
                                    ></v-text-field>
                                </Field>
                                <v-btn
                                    block
                                    color="success"
                                    size="large"
                                    type="submit"
                                >
                                    Se connecter
                                </v-btn>
                            </Form>
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-app>
</div>

nuxt js config

// https://v3.nuxtjs.org/api/configuration/nuxt.config
// @ts-ignore
export default defineNuxtConfig({
runtimeConfig: {
    SECRET: '',
    public: {
        REST_API_URL: process.env.NUXT_REST_API_URL || 'http://localhost:8089/api',
        SUPER_ADMIN_ROLE: 'SUPER_ADMIN',
        KITCHEN_ROLE:'',
        DELIVERY_ROLE:'',
        CASHIER_ROLE:''
    }
},
css: [
    "vuetify/lib/styles/main.sass"
],
build: {
    transpile: ["vuetify"]
},
vite: {
    define: {
        "process.env.DEBUG": false
    }
}
})

and vuetify.js in plugins

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'

export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
    components
})
nuxtApp.vueApp.use(vuetify)
})

the display is the following

enter image description here

and in DOM

enter image description here

Any idea ?

cyril
  • 872
  • 6
  • 29
  • What do you have in the DOM? Are you using the latest version for both packages? – kissu Nov 17 '22 at 12:30
  • i updated question, in the dom it seems to have the icon... in css nothing with display none, really strange – cyril Nov 17 '22 at 12:43

1 Answers1

0

thanks to this link question

npm install import @mdi/font

Then in your nuxt.config.js add the following entry to your css field:

css: ["@mdi/font/css/materialdesignicons.css"]

so for me:

css: [
    "vuetify/lib/styles/main.sass","@mdi/font/css/materialdesignicons.css"
],

and it is ok

cyril
  • 872
  • 6
  • 29