Categories
JavaScript Vue

Create a Hello World App with Vuejs

Spread the love

There’re a few ways to create a hello world app with Vuejs.

With the Vue CLI, we can install it by running:

npm install -g @vue/cli

Then we run it as follows:

vue create my-project

Where my-project can be replaced with the project name of our choice.

We keep all the default choices when asked when we go through the wizard.

Then in App.vue, we write:

<template>
  <div id="app">hello world</div>
</template>

<script>
export default {
  name: "App"
};
</script>

We can also write:

<template>
  <div id="app">{{msg}}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "hello world"
    };
  }
};
</script>

We can also use the script tag version as follows:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      new Vue({ el: "#app", template: "<div>hello world</div>" });
    </script>
  </body>
</html>

We can also put the ‘hello world’ as a string in the data property as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "hello world"
        },
        template: "<div>{{msg}}</div>"
      });
    </script>
  </body>
</html>

We display the msg property’s value in the template.

Leave a Reply

Your email address will not be published. Required fields are marked *