Vue
CDN
Introdução
Vue CDN?
Vue CDN é uma forma de usar o framework Vue.js diretamente em uma página HTML, sem precisar instalar nada via npm ou configurar ferramentas como Webpack, Vite, etc.
Significado
CDN significa: Content Delivery Network. É uma rede de servidores que entrega arquivos (como scripts e estilos) rapidamente para qualquer lugar do mundo.
Funcionamento
Como ainda não estamos utilizando um Builder como
Vite, VueCli ou Nuxt será necessário emular um servidor utilizando o plugin Live Server para VSCode.Você só precisa adicionar uma tag <script> no seu HTML com o link da versão do Vue hospedada em um CDN.
Exemplo com Vue 3:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>Vue CDN</title>
</head>
<body>
<div id="app">
{{ mensagem }}
</div>
<!-- Vue 3 via CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
mensagem: 'Olá, Vue com CDN!'
}
}
}).mount('#app')
</script>
</body>
</html>
Vantagens
- Zero instalação — só copiar e colar.
- Ótimo pra testes rápidos, protótipos ou estudos.
- Não precisa de build tools (webpack, vite etc).
Limitações
- Não é ideal para projetos grandes ou em produção.
- Menos controle sobre performance, otimizações e modularização.