Category: Vue 3

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a random joke app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create joke-app

and select all the default options to create the project.

Create the Random Joke App

We can create our random joke app by writing:

<template>
  <div>
    <p>{{ joke }}</p>
    <button @click="getJoke">get new joke</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      joke: "",
    };
  },
  methods: {
    async getJoke() {
      const res = await fetch("https://api.chucknorris.io/jokes/random");
      const data = await res.json();
      this.joke = data.value;
    },
  },
  beforeMount() {
    this.getJoke();
  },
};
</script>

We display the joke value in the p element.

The button lets us get the joke when we click on it

It calls getJoke to get a new joke.

In the getJoke method, we call fetch to get the joke value.

It makes a GET request to get the joke from the URL.

The URL is the Chuck Norris API.

It returns a promise with an object with the json method that returns the JSON object from the response.

Then we get the value property from the JSON object to set the joke reactive property.

In the beforeMount method, we call getJoke so that we display the joke when the page loads.

Conclusion

We can create a random joke app easily with Vue 3 and JavaScript.

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a flashcard app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create flashcard

and select all the default options to create the project.

We also need the uuid package to let us generate unique IDs for our grocery list items.

To do this, we run:

npm i uuid

Create the Flashcard App

To create the flashcard app, we write:

<template>
  <form @submit.prevent="add">
    <div>
      <label>question</label>
      <input v-model="item.question" />
    </div>
    <div>
      <label>answer</label>
      <input v-model="item.answer" />
    </div>
    <button type="submit">submit</button>
  </form>
  <div v-for="(item, index) of items" :key="item.id">
    <b>question</b>
    <p>{{ item.question }}</p>
    <b>answer</b>
    <p>{{ item.answer }}</p>
    <button @click="deleteItem(index)">delete</button>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  name: "App",
  data() {
    return {
      item: {
        question: "",
        answer: "",
      },
      items: [],
    };
  },
  methods: {
    add() {
      this.items.push({
        id: uuidv4(),
        ...this.item,
      });
      this.item = {};
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

In the template, we have the form to let us enter questions answers into the form.

v-model binds to the entered question and answer to item.question and item.answer reactive properties.

The submit button triggers the submit event which runs the add method.

The prevent modifier stops the default server-side submit behavior.

We use v-for to render the items in the items reactive property.

We render the item.question and item.answer values from the object entry.

And we have a button to let us delete the item with the deleteItem method.

deleteItem takes the index of the item to delete.

The key prop lets us set the unique ID for the item so that Vue 3 can keep track of the rendered array items properly.

The data method returns an object with the initial values of the reactive properties.

The add method calls push with an object to add an item to the array.

We merge the id with the other this.item properties to form the final object before pushing it.

deleteItem calls splice with the index and 1 to delete an item with the given index and deletes 1 item only.

Now we see that the list is displayed when we type in something and click submit.

Conclusion

We can create our own flashcard app easily with Vue 3 and JavaScript.

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a pass the message app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create pass-the-message

and select all the default options to create the project.

Create the Pass the Message App

To create the pass the message app, we write:

<template>
  <form @submit.prevent="pass">
    <label>message you like to pass</label>
    <input v-model="message" />
    <button type="submit">submit</button>
  </form>
  <h1>last message delivered</h1>
  <p>{{ prevMessage }}</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "",
      prevMessage: "",
    };
  },
  methods: {
    pass() {
      this.prevMessage = this.message;
      this.message = "";
    },
  },
};
</script>

We have the form to let us type in the message to pass in.

We bind the entered value to the message reactive property with v-model .

Also, we listen to the submit event with the pass method.

The prevent modifier prevents the default server-side submission behavior.

In the pass method, we set the value of the prevMessage reactive property to message .

And we set this.mnessage to an empty string to empty the input.

Now, when we type in something and click submit, the message is displayed below the last message delivered heading.

The data message method returns the initial values of the message and prevMessage reactive properties.

Conclusion

We can create a pass the message app easily with Vue 3 and JavaScript.

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a to-do list app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create budget-tracker

and select all the default options to create the project.

We also need the uuid package to let us generate unique IDs for our grocery list items.

To do this, we run:

npm i uuid

Create the Budget Tracker

The budget tracker lets us enter our budget and our expense items.

To do this, we write:

<template>
  <div>
    <form>
      <fieldset>
        <label>budget</label>
        <input v-model.number="budget" />
      </fieldset>
    </form>

    <form @submit.prevent="add">
      <h1>add expensse</h1>
      <fieldset>
        <label>description</label>
        <input v-model="expense.description" />
      </fieldset>

      <fieldset>
        <label>cost</label>
        <input v-model.number="expense.cost" />
      </fieldset>
      <button type="submit">add expense</button>
    </form>

    <p>remaining budget: ${{ remainingBudget }}</p>

    <div v-for="(item, index) of expenses" :key="item.id">
      {{ item.description }} - ${{ item.cost }}
      <button @click="remove(index)">remove</button>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  name: "App",
  data() {
    return {
      expense: {
        description: "",
        cost: 0,
      },
      expenses: [],
      budget: 0,
    };
  },
  computed: {
    expenseValid() {
      const { cost, description } = this.expense;
      return +cost >= 0 && description.length > 0;
    },
    remainingBudget() {
      const { budget, expenses } = this;
      const totalExpenses = expenses
        .map(({ cost }) => cost)
        .reduce((a, b) => a + b, 0);
      return budget - totalExpenses;
    },
  },
  methods: {
    add() {
      if (!this.expenseValid) {
        return;
      }
      this.expenses.push({
        id: uuidv4(),
        ...this.expense,
      });
      this.expense = {};
    },
    remove(index) {
      this.expenses.splice(index, 1);
    },
  },
};
</script>

The first form element has an input field to let us enter the budget.

v-model binds the entered value to the budget reactive property.

The number reactive property converts what we enter to a number.

Similarly, we have the 2nd form element to let us enter the expense items.

It has the description and cost properties.

The add expense button triggers the submit event on the 2nd form and calls the add method to add the expense item to the expenses reactive property array.

The p element renders the remainingBudget computed property, which has the budget minus the total expenses.

And the v-for directive renders the expense items we entered.

In the component object, we have the data method with the reactive properties initialized by return an object with them inside.

We have the expenseValid computed property to check if the expense fields are valid.

remainingBudget computes the budget minus the total expenses calculated from the expenses items.

In methods , we have the add method to add the budget item by calling this.expenses.push .

We generate a unique ID for each entry with the uuidv4 function.

The remove method removes an expenses item by its index with splice . It’s called the remove button when we click on it.

Conclusion

We can create a budget tracker app easily with Vue 3 and JavaScript.

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a to-do list app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create grocery-list

and select all the default options to create the project.

We also need the uuid package to let us generate unique IDs for our grocery list items.

To do this, we run:

npm i uuid

Create the Grocery List App

To create the grocery list app, we write:

<template>
  <div>
    <form @submit.prevent="add">
      <fieldset>
        <label>item</label>
        <input v-model="item" />
      </fieldset>
      <button type="submit">add item</button>
    </form>

    <div v-for="(item, index) of items" :key="item.id">
      {{ item.item }}
      <button @click="remove(index)">remove</button>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  name: "App",
  data() {
    return {
      item: "",
      items: [],
    };
  },
  methods: {
    add() {
      const { item } = this;
      this.items.push({
        id: uuidv4(),
        item,
      });
    },
    remove(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

We have the form element with the @submit directive to let us listen to submit events, which is triggered when we click add item.

v-model is bound to item so that we can get the entered value from the add method.

With the v-for directive, we render the added items.

The key is required to be a unique ID, so that Vue 3 can keep track of the items in the rendered list.

We have the remove button to remove the item.

In the component object, we have the data method to define the item we want to add.

items have the items we added.

In add , we call this.items.push to add an item to the grocery list.

We generate a unique ID for each item with the uuidv4 function.

In the remove method, we call this.items.splice to remove an item by its index.

Now we can add and remove items from the grocery with the add item button and remove button respectively.

Conclusion

We can write a grocery list app easily with Vue 3 and JavaScript.