1

I can’t solve the problem, the v-icon are displayed normally if the middleware is not enabled, maybe my middleware is not correct?

template:

<v-icon>{{'mdi-close'}}</v-icon>

script:

middleware: ['auth'],

middleware/auth.js

export default function({store, redirect}){
    if (!store.getters.hasToken) {
        redirect('/login')
    }
}
Igor Panenko
  • 11
  • 2

2 Answers2

0

Nothing related to the middleware here, the icon just looks wrong.
Looking at this example, you need to have the following

<v-icon>mdi-close</v-icon>
kissu
  • 40,416
  • 14
  • 65
  • 133
  • I am not familiar with nuxt, but it is OK in plain Vuetify to use author's syntax... Imagine that you need to dynamically switch icons by some condition - you should use variable that will contain some string with icon's name. Is it impossible to do it in nuxt? – Alexander Shkirkov Oct 24 '22 at 14:03
  • @AlexanderShkirkov does that one work? If it does, you can always use a slot yeah. Or even use your own icons: https://stackoverflow.com/a/72055404/8816585 (works with Nuxt2 too) – kissu Oct 24 '22 at 14:20
  • the example is correct, here is a more complicated one ` {{ open ? 'mdi-folder-open' : 'mdi-folder' }} ` – Igor Panenko Oct 24 '22 at 14:53
  • @IgorPanenko the example doesn't work I guess? What do you see in the DOM as a difference? Then, you would need to use slots: https://vuejs.org/guide/components/slots.html#slots Or my approach regarding icons (better alternative IMO). – kissu Oct 24 '22 at 14:55
  • there are no changes to the DOM, and this example does not work https://vuetifyjs.com/en/components/treeview/#append-and-label – Igor Panenko Oct 24 '22 at 15:02
  • Then, your Vuetify configuration maybe have some issues. – kissu Oct 24 '22 at 15:13
  • I tried it on a pure example, there is no such problem, but on the current project I wanted to add an icon in the admin panel, and the middleware does not work, tell me how to catch the conflict – Igor Panenko Oct 24 '22 at 16:10
  • You're using Nuxt Auth module? Not sure how to debug the icon, would need more details form your side here. – kissu Oct 24 '22 at 16:17
  • I myself am in doubt, I remove the middleware, everything works, there are no modules, everything is on cookies and database – Igor Panenko Oct 24 '22 at 16:28
  • found a difference, no ```.mdi-close::before { content: "\F0156"; }``` – Igor Panenko Oct 24 '22 at 16:35
  • What is the middleware about so? – kissu Oct 24 '22 at 16:59
0

decided

npm install @mdi/font

nuxt.config.js

css: ['@mdi/font/css/materialdesignicons.min.css']
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Igor Panenko
  • 11
  • 2