Todo componente Vue vive em um arquivo com a extensão .vue. Nesta página vamos abrir esse arquivo e entender cada uma das suas partes: os blocos <script>, <template> e <style>, além dos atributos setup, lang e scoped, que aparecem em praticamente todos os componentes do projeto.

A estrutura de um arquivo .vue

O arquivo .vue é chamado de SFC (Single File Component), ou componente de arquivo único. Ele junta, em um só lugar, a lógica, o HTML e o CSS de um pedaço da interface. Crie um arquivo chamado Title.vue e escreva:

<script setup>
const title = 'Olá, Elmore!';
</script>

<template>
    <h1 class="title">{{ title }}</h1>
</template>

<style scoped>
.title {
    color: #3db8e0;
}
</style>

Cada bloco tem um papel bem definido:

Bloco	Papel
`<script>`	A lógica: variáveis, funções e dados
`<template>`	O HTML da tela, que pode usar o que foi criado no script
`<style>`	O CSS do componente

<aside> 💡 Nenhum bloco é obrigatório, mas quase sempre existe pelo menos o <template>.

</aside>

setup e lang

O atributo setup

Com <script setup>, tudo o que você cria no script (variáveis, funções e imports) fica disponível direto no template. Sem o setup, seria preciso usar a chamada Options API, escrevendo export default e devolvendo tudo manualmente:

<!-- Sem setup (Options API) -->
<script>
export default {
    data() {
        return { title: 'Olá!' };
    },
};
</script>

<!-- Com setup (forma moderna e recomendada) -->
<script setup>
const title = 'Olá!';
</script>

O setup é a forma moderna e a recomendada, e é a que vamos usar em todo o workshop.

O atributo lang

O lang indica a linguagem do bloco. Sem ele, o script é JavaScript. Para usar TypeScript, basta escrever:

<script setup lang="ts">
const age: number = 12;
</script>

O mesmo vale para CSS com pré-processador, como em <style lang="scss">. No projeto do workshop usamos JavaScript e CSS puro na maior parte dos componentes, então quase sempre não haverá lang.