chore: update vue3 sections

Author: Novout

docs/tutorial/1-Iniciando com Vue/4-Fluxo e Props.md

@@ -95,7 +95,7 @@ export default {
 
 O **name** significa o nome do componente que está sendo exportado, por padrão o **Vue** exporta o nome que está descrito na extensão do arquivo, neste caso, **App** seria exportado da mesma forma.
 
-```js
+```ts
 <script>
 export default {
   name: 'App'
@@ -107,7 +107,7 @@ export default {
 
 Agora vamos diretamente para o componente **HelloWorld.vue**:
 
-```js
+```ts
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
@@ -152,7 +152,7 @@ export default {
 
 Vamos desconsiderar as listas, pois possuem apenas a lógica padrão do **HTML**, vamos focar no que o **Vue** disponibiliza:
 
-```js
+```ts
 <template>
   <div>
     <h1>{{ msg }}</h1>
@@ -196,7 +196,7 @@ Neste caso, estariamos passando um **Object**. Iremos futuramente no curso expli
 
 * Podemos também passar para as **props** outras restrições, como **required**(boolean, se a prop será obrigatória ou não), **default**(podemos definir um valor setado em caso o componente pai não mande nenhum conteúdo da prop setada).
 
-```js
+```ts
 <script>
 export default {
   props: {
@@ -211,7 +211,7 @@ export default {
 
 Agora vamos falar sobre a **msg** sendo exibida no template
 
-```js
+```ts
 <template>
   <div>
     <h1>{{ msg }}</h1>
@@ -233,7 +233,7 @@ No **Vue**, conteúdos passados por **interpolação** já são reativos, ou sej
 
 Podemos também intercalar conteúdos **estáticos** sem nenhum problema
 
-```js
+```ts
 <template>
   <div>
     <h1>Hello {{ world }}</h1>

docs/tutorial/2-Conceitos/1-Data, Methods e Modificadores.md

@@ -4,7 +4,7 @@
 
 Agora vamos declarar o **data**
 
-```js
+```ts
 <script>
 export default {
   data() {
@@ -22,7 +22,7 @@ Precisamos retornar um objeto para o **data** para que cada instância possa man
 
 No **data** podemos declarar qualquer tipo de dado(objetos, arrays, etc...)
 
-```js
+```ts
 <script>
 export default {
   data() {
@@ -81,7 +81,7 @@ Métodos que vão juntar na instância do Vue. Você pode acessar esses métodos
 
 Agora, vamos fazer um **contador** mutando a nossa variavel declarada na instância, usando **methods**:
 
-```js
+```ts
 <template>
   <section>
     <button v-on:click="acrescentar()">Clique aqui</button>
@@ -107,7 +107,7 @@ export default {
 
 Podemos escrever **methods** de outras formas, como:
 
-```js
+```ts
 <template>
   <section>
     <button v-on:click="acrescentar()">Clique aqui para acrescentar</button>
@@ -136,7 +136,7 @@ export default {
 ```
 Podemos também capturar o **event**, contendo todos os dados do emissor, ou seja, o evento do DOM nativo:
 
-```js
+```ts
 <script>
 export default {
   methods: {
@@ -152,7 +152,7 @@ export default {
 
 Como dito na seção de fluxo e props, podemos exibir algo da instância diretamente no template.No methods podemos retornar valores para o template usando o **v-bind**.
 
-```js
+```ts
 <template>
   <img v-bind:src="importLogo()">
 </template>

docs/tutorial/2-Conceitos/10-Mixins.md

@@ -6,7 +6,7 @@ Incrivelmente existe muitos códigos que ainda são feito com o famoso ctrc + ct
 
 Felizmente, os **Mixins** do **Vue** são bem simples de se usar (assim como a maioria das coisas no **Vue** comparando com outras frameworks).O componente terá acesso a todas as opções no mixin como se fosse declarado no próprio componente.
 
-```js
+```ts
 // arquivo mixin.js
 export default {
   data () {
@@ -39,7 +39,7 @@ new Vue({
 
 Dessa forma, temos acesso ao mixin apenas pelo **$data**, evitando problemas com declarações no próprio componente que está utilizando o **mixin**.
 
-```js
+```ts
 // mixin.js file
 export default {
   data () {
@@ -70,7 +70,7 @@ export default {
 
 Podemos criar mixins globais utilizando o **Vue.mixin**:
 
-```js
+```ts
 // irá jogar o 'importante' para as opções
 Vue.mixin({
   created() {

docs/tutorial/2-Conceitos/3-Computed e Watch.md

@@ -12,7 +12,7 @@ Neste ponto, o modelo **não** é mais simples e declarativo. Você precisa exam
 
 É por isso que, para qualquer lógica complexa, você deve usar uma **propriedade computada**(computed properties):
 
-```js
+```ts
 <template>
   <div id="example">
     <p>Mensagem inicial: "{{ hello }}"</p>

docs/tutorial/2-Conceitos/5-Instância Vue.md

@@ -6,7 +6,7 @@ Já vimos um pouco sobre a instância **new Vue**, agora vamos aprofundar mostra
 
 Podemos definir componentes diretamente na instância utilizando o **.component**:
 
-```js
+```ts
 Vue.component('card', {
   props: ['titulo'],
   template: '<p>{{ titulo }}</p>',
@@ -21,7 +21,7 @@ Vue.component('card', {
 
 Para a utilização de plugins, utilizamos o **.use** antes ta **instanciação** do **Vue**. Vamos usar o exemplo de instalação do plugin [Vuelidate](https://vuelidate.js.org).
 
-```js
+```ts
 import Vue from 'vue';
 import Vuelidate from 'vuelidate';
 Vue.use(Vuelidate);
@@ -37,7 +37,7 @@ new Vue({
 
 Com o **Vue** podemos criar variaveis globais para a manipulação de forma facilitada, com a convensão **$**.
 
-```js
+```ts
 import Vue from 'vue';
 import axios from 'axios';
 
@@ -56,7 +56,7 @@ new Vue({
 
 Para conseguirmos alterar configurações padrões no **Vue**, utilizamos o **.config** para conseguir acessar estas configurações
 
-```js
+```ts
 Vue.config.productionTip = false;
 
 //...

docs/tutorial/2-Conceitos/6-LifeCycleHooks.md

@@ -30,7 +30,7 @@ export default {
 
 No hook criado, agora temos acesso aos dados reativos e os eventos. Os modelos e o DOM virtual **ainda** não foram montados ou renderizados.
 
-```js
+```ts
 <script>
 export default {
   data() {
@@ -56,7 +56,7 @@ POR FAVOR(Sério mesmo): Se você precisa buscar alguns dados para o seu compone
 
 A diferença do **beforeMount** e **mounted** é que temos acesso total ao elemento nativo(new Vue()), sendo **mounted** o hook mais utilizado, geralmente usado para motificar o **DOM**.
 
-```js
+```ts
 <script>
 export default {
   beforeMount() {
@@ -73,7 +73,7 @@ export default {
 
 Os ganchos de atualização são chamados sempre que uma propriedade **reativa** usada por seu componente é **alterada**, ou qualquer outra coisa faz com que seja renderizada novamente. Dessa forma conseguimos trabalhar ao ciclo de **computer-render** do seu componente.
 
-```js
+```ts
 <script>
 export default {
   data() {
@@ -99,7 +99,7 @@ export default {
 
 Quando você alcança o gancho destruído, vai restar pouca coisa em seu componente. Tudo o que foi anexado a ela já foi destruído, mas você pode usar o gancho destruído para fazer alguma limpeza necessária.
 
-```js
+```ts
 <script>
 export default {
   destroyed() {

docs/tutorial/2-Conceitos/7-BusEvent.md

@@ -8,7 +8,7 @@ Mas para um aplicativo com arquitetura simples, basta comunicar-se entre compone
 
 Primeiro de tudo, precisamos de um mecanismo para transferir eventos entre componentes. Devido à simplicidade do **Vue**, ele nos permite criar uma nova **instância** com facilidade:
 
-```js
+```ts
 // ./src/event-bus.js
 import Vue from 'vue';
 
@@ -19,7 +19,7 @@ export default EventBus;
 
 Aqui temos um componente que importa o Vue e o EventBus. Quando o método **emitirEvento** do componente é chamado, ele emite um novo evento chamado **FORMULARIO** e passa uma carga útil junto com ele.
 
-```js
+```ts
 // primeiro-componente.js
 import Vue from 'vue';
 import EventBus from './event-bus';
@@ -41,7 +41,7 @@ Vue.component('primeiro-componente', {
 
 Em outro componente, podemos registrar um ouvinte que escuta o evento **FORMULARIO** a ser transportado usando o EventBus. Assim que o evento aparecer, podemos executar o JavaScript com o payLoad recebido como argumento.
 
-```js
+```ts
 // segundo-componente.js
 import Vue from 'vue';
 import EventBus from './event-bus';
@@ -59,7 +59,7 @@ E pronto! Dessa forma conseguimos comunicar dois componentes filhos se a necessi
 
 Para anexar os componentes:
 
-```js
+```ts
 <script>
 import PrimeiroComponente from './primeiro-componente';
 import SegundoComponente from './segundo-componente';

docs/tutorial/2-Conceitos/8-Transições.md

@@ -26,7 +26,7 @@ O *-active é na onde definimos o **tempo de transição** da nossa transição,
 
 Iremos agora mostrar um exemplo na prática usando as **transições**:
 
-```js
+```ts
 <template>
   <div>
     <button @click="mostrar = !mostrar">Clique aqui</button>
@@ -68,7 +68,7 @@ export default {
 
 Assim como as transições, podemos usar **animações** de uma forma parecido em nossos componentes **transition**:
 
-```js
+```ts
 <template>
   <div>
     <button @click="mostrar = !mostrar">Clique aqui</button>
@@ -112,15 +112,15 @@ export default {
 
 Utilizando o **Out-in**, podemos **esperar** a transição de um componente, assim evitando **mutações** inesperadas(na verdade, esperadas) no template:
 
-```js
+```ts
 <transition name="cor" mode="out-in">
   ...
 </transition>
 ```
 
 ## Transições entre componentes
 
-```js
+```ts
 <transition name="troca" mode="out-in">
   <component v-bind:is="componente"></component>
 </transition>
@@ -132,7 +132,7 @@ Utilizando o **Out-in**, podemos **esperar** a transição de um componente, ass
 
 Quando temos mais de um elemento dentro de um **transition**(no caso mais que 1 elemento filho na transição), temos que usar o **transition-group**:
 
-```js
+```ts
 <transition-group name="list" tag="p">
   <article v-for="(item, index) in lista" :key="index">
     {{ item }}
@@ -155,7 +155,7 @@ Usando o **move** é aplicado diretamente um evento de transição a uma lista q
 
 Podemos anexar transições em nosso template:
 
-```js
+```ts
 @before-enter="beforeEnter"
 // ou
 v-on:before-enter="beforeEnter"

docs/tutorial/3-Vuetify/3-Customização.md

@@ -4,7 +4,7 @@ Vamos agora customizar o nosso **tema**, para conseguirmos seguir uma padroniza
 
 Quando instalamos o **Vuetify**, foi criado uma pasta **plugins** contendo o **vuetify.js**:
 
-```js
+```ts
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 
@@ -18,7 +18,7 @@ Dentro do **Vuetify** podemos passar configurações por padrão.
 
 Por exemplo, vamos passar o tema padrão para a aplicação:
 
-```js
+```ts
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 
@@ -35,7 +35,7 @@ export default new Vuetify({
 
 Podemos também customizar diretamente as **cores**:
 
-```js
+```ts
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 

docs/tutorial/4-Vue Router/1-Iniciando com Vue Router.md

@@ -21,7 +21,7 @@ Criamos um arquivo `vuerouter.js` em `./src/plugins/vuerouter.js'` e adicionamos
 
 `./src/plugins/vuerouter.js`
 
-```js
+```ts
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import routes from '@/routes.js';
@@ -38,7 +38,7 @@ export default new VueRouter({
 
 Agora vamos importar em nosso `main.js`.
 
-```js
+```ts
 // ...
 import router from '@/plugins/vuerouter.js';
 // ...
@@ -51,7 +51,7 @@ Não acabamos ainda, vamos criar o arquivo `routes.js` na raiz do `src` que é a
 
 `./src/routes.js`
 
-```js
+```ts
 import Home from './pages/Home.vue';
 
 export default [
@@ -78,13 +78,13 @@ Vamos transferir o nosso conteúdo de `App.vue` para `./src/pages/Home.vue`.
 
 `./src/pages/Home.vue`
 
-```js
+```ts
 import Header from '../components/header/Header.vue';
 ```
 
 E o novo conteúdo de `./src/App.vue` será:
 
-```js
+```ts
 <template>
   <router-view />
 </template>