Different Ways to Create a Vue.js App
Setting up Vue.js Using CDN links:
Setting up Vue.js using CDN links allows you to quickly start building Vue.js applications without the need for complex setup or build processes. CDN (Content Delivery Network) links provide a way to include Vue.js directly into your HTML file, making it accessible to your application.
CDN link:
"https://unpkg.com/vue@3/dist/vue.global.js
Example: This example shows the use of CDN link to run the VueJs application locally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Vue.js CDN Example</title>
</head>
<style>
#app {
color: green;
font-size: x-large;
}
</style>
<body>
<div id="app">{{ message }}</div>
<script src=
"https://unpkg.com/vue@3/dist/vue.global.js">
</script>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello GFG!')
return {
message
}
}
}).mount('#app')
</script>
</body>
</html>
Output:
Explanation:
- We create an HTML file with a <div> element with the id app, where our Vue.js app will be mounted.
- We include Vue.js library directly from the CDN using the <script> tag.
- We define our Vue.js app script within another <script> tag. This script creates a new Vue instance, binds it to the #app element, and defines a data property message with the value ‘Hello, Vue.js!’.
- The {{ message }} syntax in the HTML template interpolates the message data property into the paragraph element, displaying the message on the webpage.
- When you open this HTML file in a browser, you’ll see the message “Hello, Vue.js!” displayed on the webpage, demonstrating a Vue.js app set up using CDN links.
Steps to Setup the Vue.js App Using Vue CLI:
Step 1: Install Node.js from the official website.
Step 2: Open your terminal;
Step 3: Create a new Vue project by running:
npm create vue@latest
then select these option:
Step 4: Navigate to the project directory and Start the development server
cd vue-project
npm install
npm run dev
Step 5: Remove the code for the HomeView.vue and paste this.
// HomeView.vue
<script setup>
</script>
<template>
<main>
<div class="contact">
<h1>This is an Home page</h1>
<button @click='console.log("hello")'>
Click me</button>
</div>
</main>
</template >
Output:
What is VueJS ?
Vue.js is a free JavaScript framework for building interactive and dynamic user interfaces. It provides a special helper for JavaScript developers, similar to React. Vue.js is maintained by developers from various communities, including its creator Evan You, and is continuously updated to ensure its awesomeness. With Vue.js, websites can become highly interactive and lively, especially suitable for modern single-page applications. It facilitates the creation and reuse of different parts of a webpage, akin to having building blocks that can be rearranged easily.
Contact Us