Home Como adicionar classe CSS na div #app do VueJs 3
Post
Cancelar

Como adicionar classe CSS na div #app do VueJs 3

Você já precisou adicionar uma classe CSS naquela div em que a sua aplicação vue é injeta dentro? Sim? Bom, caso você não esteja usando Vite, por exemplo, ainda pode editar o html da página base que fica dentro do folder “public”, não é uma ótima solução, porém, funciona para casos simples.

A coisa complica quando você precisa fazer isso de maneira dinâmica (conforme o template renderizada) ou mesmo por que esta usando o Vite e não há mais a pastinha “public” para fazer o ajuste por lá.

Para resolver isso, você pode usar um dos hooks do cíclo de vida do Vue e, através de um simples querySelector, aplicar as classes desejadas, ficando assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <main-menu />
  <div class="page-wrapper">
    <message-display />
    <router-view></router-view>
    <page-footer />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import MainMenu from '@/components/menu/MainMenu.vue'
import PageFooter from '@/components/page/PageFooter.vue'
import MessageDisplay from '@/components/MessageDisplay.vue'
onMounted(() => {
  document.querySelector('#app').classList.add('page')
})
</script>

Simples né? Aqui você pode encontrar outro exemplo, todos eles utilizados no webBudget.

Esta postagem está licenciada sob CC BY 4.0 pelo autor.

Queries mais dinâmicas com spring data JPA

AWS + Spring na prática: SNS, SQS e Localstack

Comments powered by Disqus.