Category: Vue 3 Projects

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.

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 shopping cart 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 shopping-cart

and select all the default options to create the project.

We also need the Vue Router package to let us navigate to different pages in the app.

To do this, we run:

npm i vue-router@next

Create the Shopping Cart

The first step for creating the shopping cart is to create the view files.

We create the views folder in the src folder.

Then inside it, we add the Cart.vue and Store.vue files to create the store page which we can browser.

Cart.vue has the cart page.

Then in main.js , we add the Vue Router into our app by writing:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import Cart from "./views/Cart";
import Store from "./views/Store";
import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  { path: "/", component: Store },
  { path: "/cart", component: Cart }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

const app = createApp(App);
app.use(router);
app.mount("#app");

We import the view component files we created earlier.

Then we add them to the routes array.

Next, we call createRouter to create the router object.

We add the routes object, we created earlier inside the argument object.

createWebHashHistory makes Vue Router add a # sign between the first segment and the other segments of the URL.

And then we call app.use with router to add the router.

To create a simple store page, we go into Store.vue and write:

<template>
  <div>
    <h1>Store</h1>
    <div v-for="item of items" :key="item.id">
      <p>{{ item.name }}</p>
      <img :src="item.imageUrl" />
      <button @click="removeFromCart(item.id)" v-if="isInCart(item.id)">
        remove from cart
      </button>
      <button @click="addToCart(item.id)" v-else>add to cart</button>
    </div>
    <button @click="$router.push('/cart')">check out</button>
  </div>
</template>

<script>
const items = Object.freeze([
  {
    id: 1,
    imageUrl: "grape.jpg",
    name: "grape",
  },
  {
    id: 2,
    imageUrl: "orange.jpg",
    name: "orange",
  },
  {
    id: 3,
    imageUrl: "apple.jpg",
    name: "apple",
  },
]);

export default {
  name: "Store",
  data() {
    return {
      items,
      cart: [],
    };
  },
  methods: {
    isInCart(itemId) {
      if (!localStorage.getItem("cart")) {
        localStorage.setItem("cart", JSON.stringify([]));
      }
      const cartItem = this.cart.find(({ id }) => id === itemId);
      return Boolean(cartItem);
    },
    addToCart(itemId) {
      const item = this.items.find(({ id }) => id === itemId);
      if (!localStorage.getItem("cart")) {
        localStorage.setItem("cart", JSON.stringify([]));
      }
      const cartItems = JSON.parse(localStorage.getItem("cart"));
      cartItems.push(item);
      localStorage.setItem("cart", JSON.stringify(cartItems));
      this.cart = JSON.parse(localStorage.getItem("cart"));
    },
    removeFromCart(itemId) {
      const cartItems = JSON.parse(localStorage.getItem("cart"));
      const index = cartItems.findIndex(({ id }) => id === itemId);
      cartItems.splice(index, 1);
      localStorage.setItem("cart", JSON.stringify(cartItems));
      this.cart = JSON.parse(localStorage.getItem("cart"));
    },
  },
};
</script>

We render the store items with v-for .

We display the remove from cart button if the item is already added top the cart.

And we show the add to cart button otherwise.

The check is done by the isInCart method, which gets the cart items from the this.cart reactive property and check if find returns anything given the itemId .

addToCart adds the item to the cart entry in local storage, which is an array that we create if it doesn’t exist.

After that, we update the this.cart reactive property with the latest value from local storage.

removeFromCart finds the index from the cart items from local storage by the itemId with findIndex .

Then we call splice to remove the item by the index .

And then we call setItem to update the cart with the latest items in the cart.

And we update this.cart with the latest values form local storage.

items have the store items.

The checkout button calls $router.push with '/cart' to go the cart page.

To add the content for the cart page, we write the following in Cart.vue:

Cart.vue

<template>
  <div>
    <h1>Cart</h1>
    <div v-for="(c, index) of cart" :key="c.id">
      <p>{{ c.name }}</p>
      <img :src="c.imageUrl" />
      <button @click="removeFromCart(index)">remove from cart</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Cart",
  data() {
    return {
      cart: [],
    };
  },
  methods: {
    removeFromCart(itemId) {
      const cartItems = JSON.parse(localStorage.getItem("cart"));
      const index = cartItems.findIndex(({ id }) => id === itemId);
      cartItems.splice(index, 1);
      localStorage.setItem("cart", JSON.stringify(cartItems));
      this.cart = JSON.parse(localStorage.getItem("cart"));
    },
    getCart() {
      if (!localStorage.getItem("cart")) {
        localStorage.setItem("cart", JSON.stringify([]));
      }
      this.cart = JSON.parse(localStorage.getItem("cart"));
    },
  },
  beforeMount() {
    this.getCart();
  },
};
</script>

We have the same remvoeFromCart method as in Store.vue .

getCart gets the cart item from local storage and then set the returned value as the value of the this.cart reactive property.

And then we render the this.cart entries with v-for in the template.

We have the remove from cart button to remove the item with removeFromCart .

Finally, in App.vue , we write:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

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

<style>
img {
  width: 200px;
  height: 200px;
}
</style>

to add the router-view so we can see the route that Vue Router renders.

We also shrink the images to 200px by 200px with the style tag.

Conclusion

We can create a simple shopping cart easily with Vue 3 and JavaScript.