DEV Community

loading...
Cover image for VueJS: Starting a new project

VueJS: Starting a new project

josesrodriguez610 profile image josesrodriguez610 Updated on ・5 min read

VueJS?

VueJs is a lightweight, easy to learn Framework. It allows you to take a webpage and split it up into reusable components each having their own HTML, CSS and Javascript. Vue is reactive, when data changes Vue takes care of updating all the places where we are using it.
Vue was created by Evan You and it was released in February 2014.

Let’s go ahead and create our first project!

First, lets create a new folder

mkdir vue-project
cd vue-project
Enter fullscreen mode Exit fullscreen mode

To create our new project first we need to install vue cli which it stands for command-line interface and it will help you develop projects with Vue. vue/cli hides the complexity of having to know babel or webpack and it will simplify starting a project and building it.

npm install -g @vue/cli
Enter fullscreen mode Exit fullscreen mode

Now we can create our Vue app:

vue create vue-app
Enter fullscreen mode Exit fullscreen mode

I will ask you to select your preset. Let's pick the last version, Vue 3.

Alt Text

Once it finishes creating your project you can go to your app by adding these commands in your terminal

cd vue-app
npm run serve 
Enter fullscreen mode Exit fullscreen mode

It will show you where is your app running at locally
and if you go there, you will see your first Vue app!

Alt Text

At this point we have some cleanup to do.

Let's go to our root folder in our VSCode and delete the HelloWorld.vue component that will be in src/components. This will make your app freak out because it is looking for a component that is not there anymore, so we will have to change a coupe of think in App.vue.
Let’s go to App.vue and let’s delete what they have inside of 'template' and add an
H1 with hello world and in the 'script' let’s delete the import for HelloWorld and HelloWorld from the components
In 'style' we are going to delete a couple of things and add a margin top of 0 so we can start your css from scratch. It would look something like this.

<template>
  <h1>Hello World</h1>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>


* {
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

} 
</style>

Enter fullscreen mode Exit fullscreen mode

Now we have a fresh app ready to go!

Alt Text

Let’s explain now a little bit more of how the component works

In Vue instead of dividing the code base in three huge layers that work with another, Vue divides them into loosely-coupled components. In the component you can do your HML logic in “template”, Javascript inside “script” and CSS inside “style”.

What is different between Vue.js 2 and Vue.js 3 ?

Vuejs 3 introduces the composition IPA which instead of having options in your objects like :

<script>
export default {
  name: "App",
  data:
  methods: 
  computed: 
};
</script>
Enter fullscreen mode Exit fullscreen mode

Now we have a single function called setup where you would have all your logic.

<script>
export default {
  name: "App",
  setup() {
    function example() {
     // function logic
   }
  },
return {
      example,
    };
};
</script>
Enter fullscreen mode Exit fullscreen mode

Let's go back to our project and lets make a form with an input and a button.
We would have to go to template and add:

<template>
<div>
  <form>
    <h1>Hello World</h1>
    <input  />
    <button>I am a button</button>
  </form>
</div>
</template> 
Enter fullscreen mode Exit fullscreen mode

Alt Text

In Vue.js you can add event listeners to elements and you can do it by putting ‘v-on’ or the shortcut ‘@‘ and we will add submit and create a function that binds to this form.

<template>
<div>
  <form @submit="addToPage"> // <== binds to addToPage
    <h1>Hello World</h1>
    <input />
    <button>I am a button</button>
  </form>
</div>
</template>

<script>
export default {
  name: "App",
  setup() {

  },
};
</script>

Enter fullscreen mode Exit fullscreen mode

Now we have to create addToPage function inside our setup
And return the function like this.

<script>
export default {
  name: "App",
  setup() {
    function addToPage() {
      console.log('click')
    }
    return {
      addToPage,
    };
  },
};
</script>
Enter fullscreen mode Exit fullscreen mode

When we test our form and press the button the page will refresh and we don’t want that so Vue has a helper for that. You just need to add ‘prevent’ like this

<form @submit.prevent="addToPage">
Enter fullscreen mode Exit fullscreen mode

Now you will see that our console log appears when we click the button!

To save a value we need to import reactive from Vue. Now we can save a data which we will call word. Don't forget to return data, like this:

<script>
import { reactive } from "vue";

export default {
  name: "App",
  setup() {
    const data = reactive({
      word: "",
    });

    function addToPage() {
      console.log('click')
    }
    return {
      addToPage,
      data,
    };
  },
};
</script>
Enter fullscreen mode Exit fullscreen mode

Now let’s bind the text input to that specific variable with v-model and now we need to add to data as well.

<template> 
<div>
  <form @submit.prevent="addToPage">
    <h1>Hello World</h1>
    <input v-model="data.word" />
    <button>I am a button</button>
  </form>
</div>
</template>
Enter fullscreen mode Exit fullscreen mode

Now if you type in the input you will be saving the input to data.

To finish up lets add words which will be an array of all the words typed in the input and they will display in our page. Now we will add logic to our addToPage. addToPage will push into our words array every word we type into our input.

<script>
import {
  reactive
} from "vue";

export default {
  name: "App",
  setup() {
    const data = reactive({
      word: "",
      words: [],
    });

    function addToPage() {
      data.words.push(data.word);
    }
    return {
      addToPage,
      data,
    };
  },
};
</script>
Enter fullscreen mode Exit fullscreen mode

Alright great! now the last thing we have to do is to be able to loop through the array and display it in our page. Vue.js has 'v-for' which renders a list of items based on an array. Let's add some stuff to our template.

<template>
<div>
  <form @submit.prevent="addToPage">
    <h1>Hello World</h1>
    <input v-model="state.word" />
    <button>I am a button</button>
  </form>
  <ul>
   //syntax for looping in Vue
    <li v-for="(w, index) in state.words" :key="index"> // <== we need a key for it to work!
      <h1>{{ w }}</h1> // <== displaying our array
    </li>
  </ul>
</div>
</template>
Enter fullscreen mode Exit fullscreen mode

Alt Text

THERE YOU GO!

Conclusion

Vue is a fantastic framework and it has become one of the most popular Javascript frameworks because it makes the developer's job much easier when creating new applications. I had a good experience using Vue and I encourage everybody to give it a look.

Discussion (0)

Forem Open with the Forem app