estou trabalhando em um projeto vue.js/nuxt.js, onde eu preciso determinar estilos dentro do computed property e aplicar em uma div
com base no tamanho da tela, como no exemplo abaixo:
<template>
<div :style="css"></div>
</template>
<script>
export default {
computed: {
css () {
let width = window.innerWidth
// ... mobile { ... styles }
// ... desktop { ... styles }
// ... if width is less than 700, return mobile
// ... if width greater than 700, return desktop
}
}
}
</script>
isso não da certo, gera um erro windows is note defined
no Nuxt.js, o window
só estará disponível dentro do mounted
, que é gancho de ciclo de vida onde a tela já foi renderizada, o que faz total sentido.
Eu poderia colocar toda essa lógica de estilo dentro de um método e chamar no mounted, ou colocar diretamente no mounted e aplicar na div
, o problema é que o estilo será aplicado com um certo delay
depois que a página é montada.
Então como posso saber o tamanho da largura interna da página dentro do computed property?
.vue
tem 3 seções,<template>
,<script>
e<style>
. Não seria melhor você adicionar um CSS com media queries dentro da tag<style>
? Não entendi porque você está estilizando no JS.