Logotipo WeBest
InícioSobre mimProjetosHabilidadesBlogEstude Comigo

Iniciando um projeto com API Global

16 de junho, 2025
3 minutos
Gabriel Estéfono
Gabriel Estéfono
Iniciando um projeto com API Global

Introdução

Olá! Se está seguindo o roadmap e eu espero que esteja, deve ter já passado pela seção de leitura da documentação, onde separei alguns links para então chegarmos nessa parte, onde iremos iniciar um projeto usando o modo Global com a API CDN Vue.

 O projeto aqui terá o nome ‘product_card’, mas você pode escolher o nome que preferir. Não se prenda a isso. 

Explicações adicionais

Caso tenha lido a documentação, deve ter percebido que existem 2 modos de trabalhar com o Vue, sendo o primeiro o Single File Component, que é o que iremos trabalhar nessa publicação, onde o Vue.js se encarrega de toda a aplicação.

Já no caso do modo Global do Vue, utilizamos o link cdn da aplicação em um arquivo .html, ou .php e é você quem fica encarregado de algumas responsabilidades do Vue, como por exemplo o roteamento, é de forma geral, um Vue mais cru.

É importante ressaltar que em casos de utilização global do Vue via CDN, de certa forma, isso pode matar completamente o SEO do seu website, já que a renderização será 100% no cliente e os motores de busca podem não indexar corretamente seu conteúdo.

Mãos na massa

Para iniciarmos, irei considerar que você tem noção de html, css, javascript, npm a um nível médio/avançado, não entrarei em explicações sobre assuntos específicos na maior parte das vezes.

Iniciando um Projeto Vazio

Diferente da forma com Single File Component, normalmente se utiliza a forma Global quando se já tem um projeto funcionando e quer mais modularidade em uma página que não terão muita lógica iterativa, sites legados sem build, sites onde SEO não é uma preocupação, testes, provas de conceitos e etc... É muito comum se usar em Blades do Laravel, sites pequenos feitos em HTML, áreas autenticadas e etc... Eu reforço que em caso de Laravel, existem formas melhores como o Inertia, que é extremamente recomendado.

Para o nosso caso, primeiro é necessário criar o arquivo HTML, CSS e Javascript, e é justamente o que criaremos agora.


Criando arquivo HTML

Sem nenhum segredo, iremos criar um arquivo style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

Um arquivo script.js

console.log('Hello World!');

E um arquivo index.html importando os outros 2 arquivos

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Card</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    
    <script src="./script.js"></script>
</body>
</html>

Iniciando a criação da aplicação

Para então iniciarmos a aplicação, no html iremos importar o link CDN do Vue:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

E adicionaremos a tag main com o id de app:

<main id="app"></main>

Ficará assim:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Card</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <main id="app"></main>
    <script src="./script.js"></script>
</body>
</html>

Finalizando essa parte, iremos ao script.js e primeiro, iremos atrubuir o Vue a uma variável:

const vue = Vue

Utilizaremos destructuring para então extrairmos o método createApp do Objeto Vue

const { createApp } = Vue;

Agora, iremos executar o método:

createApp();

E encadear a ele o método mount, passando para ele o id que definimos na tag main:

createApp().mount('#app');


Talvez você esteja vendo um pequeno alerta no seu console:

[Vue warn]: Component is missing template or render function:  {template: ''} at <App>

Esse erro ocorre porque não há nada dentro da tag main, você pode corrigir simplesmente colocando um "Hello World!"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Card</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <main id="app">
        Hello World!
    </main>
    <script src="./script.js"></script>
  </body>
</html>

Assim, finalizamos a criação da nossa aplicação vue

Tags

Sobre o Autor

Gabriel Estéfono

Gabriel Estéfono

Desenvolvedor Web

Desenvolvedor com mais de 3 anos de experiência em HTML, CSS e JavaScript.