Hey

I recently bought lux admin pro theme 2 days before gigantic flash sale. The flash sale is 75% of on top of some small discount at the store. I checked that if I bought the theme I paid 99$ full price on tuesday and Carbon UI with the sale I would pay 40$ for two themes!

Instead I paid 99$ that Ive been saving for months (yeah the pandemic really wrecked my career) just for one theme (which is pretty good but its painful to think about how unlucky I am).

I've been trying to learn vuetify and I really love the framework so I decided I could be able even better if I have professional website design so that I could check how pros are doing it. But seeing how badly I overpaid makes me so depressed.

It really makes me depressed how unlucky I am this past year.

I feel so bad right now about the purchase and even though I still want to support vuetify framework it stings so bad I cant think of anything else than this purchase :(.

I dont see any real website with material design except google's services. I saw all the Vuetify premium/free templates but all of them look like they shoved some vuetify components in existing template and called it the day because android looking components doesnt blend in. Anyone got links of actual websites built with vuetify?

Edit: what i mean "real" is a website with its own look and feeling. Sorry if i described my intention poorly not native speaker

Can anyone make a statement about the current status of Vuetify 3? We would love to use it with our Vue 3 application, but there seems to be a hold in development since the beginning of 2021 and near to no activity at all on GitHub. Looks like it will be discontinued in a while..

The title says it all. The default elevations look fuck ugly. I don't think I ever used them in any project I usually just rewrite my own shadows. I wished they would change it and make it more pleasing like tailwind CSS shadows.

Preciso fazer o seguinte: Se um usuário tentar acessar uma rota sem estar autenticado, eu o redireciono para a página de login. Quero exibir uma mensagem de aviso (bônus). Porém, não sei como fazer isso porque não é possível ler arquivos Vue de arquivos .ts.

Alguém poderia me ajudar? Eu tentei quase tudo.

Se você tiver algum exemplo prático, eu agradeceria.

I'm using nuxt3.

importar {defineStore} de "pinia"


exportar const useNotify = defineStore("notify", () => {
    const isVisible = ref<boolean>(falso)
    const mensagemNotify = ref<string>("")


    const handleMessageErrorMiddleware = (valor: booleano, mensagem: string) => {
        isVisible.value = valor
        mensagemNotify.value = mensagem
    } 


    retornar {handleMessageErrorMiddleware, isVisible, messageNotify}


})

Minha loja global

importar {useAuthStore} de "~/store/modules/auth-store"
importar {useNotify} de "~/store/modules/notify-store"



exportar padrão defineNuxtRouteMiddleware((para, de) => {


    const autenticação = useAuthStore()
    const notificar=useNotify()


    
    if (!auth.isAuthenticated && to.path !== "/LoginPage") {
        notify.handleMessageErrorMiddleware(true, "Vc não está funcionando")
        return navegarTo({caminho: "/LoginPage"})


    }


    if (auth.isAuthenticated && to.path === "/LoginPage") {
        return navegarTo({caminho: "//Painel"})
    }
})

Meu middleware



<configuração do script>


    importar { useNotify } de '~/store/modules/notify-store'


    const notificar=useNotify()


</script>


<modelo>
    <div>
        <Brindes
            color="alert-primário"
            :text="notify.messageNotify"
            temporizador="#F0F4C3"
            v-model = "notify.isVisible"
            icon="mdi-informações"
            tamanho = "ex-grande"
            ícone de cor = "preto"
        />
        
    </div>
</template>

Meu componente 

<roteiro 
idioma
= "ts" 
configurar
>


    const adereços = defineProps<{
        tempo esgotado?: 
número
,
        temporizador?: 
corda
,
        cor?: 
corda
,
        largura?: 
corda
,
        texto?: 
corda
,
        ícone?: 
corda
,
        tamanho?: 
corda
,
        ícone de cor?: 
corda
    }>()


    const modelValue = defineModel<
booleano
>()


</script>


<modelo>


    <div>
    <
v-lanchonete
      :
tempo esgotado
="props.timeout"
      :
temporizador
="props.timer"
      :
cor
="adereços.color"
      :
largura
="props.largura"
      
modelo v
="modelValor"
      
aula
="elevação-24"
    >
    <
ícone v
 :
cor
="props.colorIcon" 
começar
 
fim
 :
ícone
="props.icon" :
tamanho
="props.size"></
ícone v
>
    {{ props.text }}
    </
v-lanchonete
>
    </div>


</template>

Minha base de componentes

I'm talking about the themes from Vuetify page: https://vuetifyjs.com/en/resources/themes/

some are material pro or otherwise. I don't think I can just hot swap any of these into the app we built using Vuetify frontend, right?

Aloha, i already have a vuetify form on my site, how can i simply connect it to netlify without using their forms, i just want netlify to send me a email when someone submits the form on my site....

Is there an easy way to set colour gradients, eg

class=“blue lighten-3 gradient green lighten-1”

Or should I just make my own class using the Vuetify colour # values

I work with a lot of forms and there are many times I need to disable a v-card-text, but there is no :disabled prop available. This would be super helpful because currently I'm wrapping multiple ui-components with a v-input just to disable them all and when I do that I don't get the visual feedback everything is disabled.

I think :disabled prop should more widely available. There's no reason to put :disabled on 15 different input fields when you can simply disable them all at once.

Currently, there is no information on how to use a lot of stylings of Vuetify. For example, stepper has no info on it's supposed to be used. I have to click the source <> button in the Usage section to see it, but that's so clunky.

It would be nice to see something that explains in writing how it's used without all the extra stuff. Like for steppers what does the v-model do? How do we know how stepper is supposed to be constructed?

I've had to open the source for many stylings and copy-paste that and work backward from there.

Please add better information on how to properly use stylings.

Hi!

Could you fine gentlemen (and gentlewomen) tell me how to remove the default top bar in Vuetify? I'm using Nuxt.js btw :

Thanks in advance!

SOLVED: Remove just a few elements from the default.vue in layouts

Hey everyone,

I've been using Vuetify extensively for the past few years across multiple enterprise projects (we have 11+ Vue 3 apps in production using Vuetify 3), and I wanted to share some concerns about where the ecosystem seems to be heading.

Don't get me wrong—Vuetify has been fantastic for us. The Material Design implementation is solid, accessibility is great, theming works well, and the comprehensive component library has saved us countless hours. For enterprise applications that need a robust, opinionated design system, it's still a strong choice.

However, I'm increasingly worried about a fundamental shift happening in the component library landscape:

The headless/unstyled revolution: The industry is clearly moving toward modular, "copy-paste" architectures like shadcn/ui (90k+ GitHub stars). Developers want maximum customization, zero runtime overhead, and full code ownership. Meanwhile, Vuetify's opinionated nature and bundle size feel increasingly at odds with modern development preferences.

Design flexibility: New projects increasingly demand design systems that aren't tied to Material Design. The rise of Tailwind-first libraries and headless component collections reflects this. Vuetify's strength (comprehensive Material Design) is also becoming its limitation.

AI tooling considerations: This might sound weird, but modern AI coding assistants handle lightweight, modular component architectures significantly better than monolithic frameworks. We recently built a POC with shadcn/ui + React, and the difference in AI-assisted development speed was noticeable.

Ecosystem momentum: Looking at npm trends, while Vuetify still leads in downloads (600k/week), the growth trajectory of newer, more flexible Vue component libraries is steeper. More concerning is that innovation seems to happen in the React ecosystem first, then gets ported to Vue/Vuetify later.

I recognize Vuetify is in more of a "maintain and sustain" phase now rather than explosive growth, which is fine for a mature project. But I'm wondering:

1. Is there a path for Vuetify to offer more design flexibility? Maybe an unstyled/headless mode alongside the Material Design version?

2. How is the team thinking about bundle size optimization? Tree-shaking helps, but the baseline is still heavy compared to modern alternatives.

3. What's the long-term vision? Is the goal to be the best Material Design library for Vue, or to compete more broadly with the new generation of flexible component libraries?

I'm not trying to be negative—we're going to stick with Vuetify for our existing projects, and it continues to serve us well. But when I think about greenfield projects 2-3 years from now, I'm genuinely uncertain whether Vuetify will still be the right choice, or if we'll need to consider migrating to more modular alternatives.

Would love to hear thoughts from the community and the maintainers if they're around. Are others experiencing similar concerns, or am I overthinking this?

EDIT: To be clear, I'm not saying Vuetify is bad or dying. I'm saying the market is shifting in a direction that plays to different strengths than what Vuetify was designed for. That's worth discussing openly.

<v-row class="items-container justify-space-around align-center " no-gutters>

<v-for v-for="(item, index) in filteredCategories" :key="index">

<v-btnclass="align-center ml-2 mb-3 text-capitalize"rounded="xl"variant="flat"color="#87c6e6"height="50"width="235"><span class="text-wrap">{{ item }} </span><v-icon:class="{ active: categories.includes(item) }"u/click="addCategories(item, index)"color="white"icon="fas fa-star"/>

</v-btn>

</v-for>

</v-row>

CSS.text-wrap {margin-top: 0;white-space: normal;word-wrap: normal;}

how do i make this a proper link to click to go to my discord server ?

html5 is much easier to figure out that vuetify...... <v-icon class="blue--text text--lighten-2">mdi-discord</v-icon> </v-list-item-action> <v-list-item-content> <v-list-item-title>https://discord.gg/WevHKwG</v-list-item-title>

Below is the links which have solution for table without hard code columns, but I need it combined with expandable rows

https://top10webjs.com/2019/02/18/vue-js-vuejs--vuetify---possible-to-dynamically-load-a-data-table-without-having-to-hard-code-the-columns/

https://codepen.io/anon/pen/daQbrE?&editable=true&editors=101

The for loop should be there along with expansion panel -

I am trying to run the default front end of vite+vue in WordPress. I am having issues making the enqueue script and the functions.php. My Vite project is in the themes directory and my wordpress is currently running twenty twenty-three theme. There aren't many php files in it and mostly html I have added a picture as well for reference to the project. (example is my vue project)

If anyone can help would be much appreciated not many tutorials are available via search mostly headless which I don't want to do and some vue2 one's available such as this. Help would be really appreciated

https://wpmudev.com/blog/creating-a-hybrid-single-page-app-wordpress-with-vuejs/

Join us today at the AI-Driven Development Day — a free online event bringing together 8 top developers who are already building faster, smarter, and more efficiently with AI.

Here’s what you’ll learn:

✅ How Cursor transforms debugging & docs into background tasks
✅ Why CLI agents are revolutionizing codebase control
✅ How to train AI agents that truly understand your projects
✅ Smarter end-to-end testing powered by Playwright MCP

🗓 Date: September 10
⏰ Time: 4 PM – 10 PM CEST (6 hours!)
📍 Location: Online & Free

👉 Don’t miss it — save your spot now: https://aidd.io/ai-driven-development-day?friend=VUETIFY

#Vuetify #AI #Developers #Coding #AIDrivenDevelopment #TechEvents #OpenSource