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 search filter 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 search-filter

and select all the default options to create the project.

Create the Search Filter

To create the image slider, we write:

<template>
  <div>
    <input v-model="keyword" placeholder="search" />
    <div v-for="(f, index) of filterImages" :key="index">
      <img :src="f.url" />
      <p>{{ f.description }}</p>
    </div>
  </div>
</template>

<script>
const images = [
  {
    url: "https://images.dog.ceo/breeds/affenpinscher/n02110627_4597.jpg",
    description: "affenpinscher",
  },
  {
    url: "https://images.dog.ceo/breeds/akita/Akita_Inu_dog.jpg",
    description: "akita",
  },
  {
    url: "https://images.dog.ceo/breeds/retriever-golden/n02099601_7771.jpg",
    description: "golden retriever",
  },
];
export default {
  name: "App",
  data() {
    return { keyword: "", images };
  },
  computed: {
    filterImages() {
      const { images, keyword } = this;
      return images.filter(({ description }) => description.includes(keyword));
    },
  },
};
</script>

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

In the template, we have the input element.

We bind the input value of it to the keyword reactive property with v-model .

And we add a placeholder for clarity.

Then we loop over the filterImages array and render the image from the url and the description .

We have to set the key to a unique key so that Vue 3 can track the divs rendered by v-for properly.

In the script tag, we have the images array with the data we want to filter.

In the data method, we return the keyword and images properties to make them reactive.

images are from the images array.

Then to add the filter when we’re typing, we create the filterImages computed property with the images that match the keyword we typed in.

We get that by calling the filter method on this.images and check the description to see the this.description reactive property is a substring of the description in the objects in the images array.

Then in the style tag, we make all the img elements display as 200px by 200px to make them fit on the page.

When we type in something into the input box, we should see the matching items displayed.

Conclusion

We can create a search filter easily with 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 an image slider 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 image-slider

and select all the default options to create the project.

Create the Image Slider

To create the image slider, we write:

<template>
  <div>
    <button @click="prev">&lt;</button>
    <img :src="image" />
    <button @click="next">&gt;</button>
  </div>
</template>

<script>
const images = [
  "https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY",
  "https://i.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU",
  "https://i.picsum.photos/id/3/200/300.jpg?hmac=o1-38H2y96Nm7qbRf8Aua54lF97OFQSHR41ATNErqFc",
];
export default {
  name: "App",
  data() {
    return { index: 0, image: images[0] };
  },
  methods: {
    next() {
      this.index = (this.index + 1) % images.length;
      this.image = images[this.index];
    },
    prev() {
      this.index = (this.index - 1) % images.length;
      this.image = images[this.index];
    },
  },
};
</script>

We create the button with < to show the less than symbol.

When we click it, it runs the prev method to move to the previous image.

The previous image is set by subtracting this.index by 1 and get the remainder of that when divided by images.length .

Likewise, we have the button with > to show the great than symbol.

When we click it, it runs the next method to move to the previous image.

The previous image is set by add 1 to this.index and get the remainder of that when divided by images.length .

To display the image, we have the img element with the src prop set to image , which has the URL of the selected image.

In the data method, we have image is set to images[0] to display the first image initially.

And we have the index set to 0 to keep the index in sync with image .

To make a slider that changes the image automatically, we write:

<template>
  <div>
    <img :src="image" />
  </div>
</template>

<script>
const images = [
  "https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY",
  "https://i.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU",
  "https://i.picsum.photos/id/3/200/300.jpg?hmac=o1-38H2y96Nm7qbRf8Aua54lF97OFQSHR41ATNErqFc",
];
export default {
  name: "App",
  data() {
    return { index: 0, image: images[0] };
  },
  methods: {
    next() {
      this.index = (this.index + 1) % images.length;
      this.image = images[this.index];
    },
    autoChangeSlide() {
      setInterval(() => {
        this.next();
      }, 1000);
    },
  },
  beforeMount() {
    this.autoChangeSlide();
  },
};
</script>

We call setInterval with a callback that calls this.next to move to the next slide every second as specified in the 2nd argument of setInterval .

Conclusion

We can create image slider app easily with 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 counter 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 counter

and select all the default options to create the project.

Create the Counter

We can create the counter by writing:

<template>
  <div>
    <button @click="count++">increment</button>
    <button @click="count--">decrement</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { count: 0 };
  },
};
</script>

We have the increment button that increments the count reactive property by 1 when we click on it.

And we have the decrement button that decrements the count reactive property by 1 when we click on it.

In the component object, we have the data method that returns an object with count set to 0 as its initial value.

This defines the count reactive property so we can use it in our template.

We can also access it as this.count in the component object.

Also, we can write:

<template>
  <div>
    <button @click="increment">increment</button>
    <button @click="decrement">decrement</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
};
</script>

to move count++ to increment and count-- to decrement .

We access count as a property of this in the component to access the reactive property.

Conclusion

We can create a counter app easily with 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 text generator 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 quote-text-generator

and select all the default options to create the project.

Create the Quote Text Generator

Now that we have the project created, we can go into the App.vue file and write:

<template>
  <div>
    <button @click="generate">generate</button>
    <p>{{ quote.quote }}</p>
    <p>{{ quote.cite }}</p>
  </div>
</template>

<script>
const quotes = [
  {
    quote:
      "One of my most productive days was throwing away 1,000 lines of code.",
    cite: "Ken Thompson",
  },
  {
    quote:
      "I have always wished for my computer to be as easy to use as my telephone; my wish has come true because I can no longer figure out how to use my telephone.",
    cite: "Bjarne Stroustrup",
  },
  {
    quote: "When in doubt, use brute force.",
    cite: "Ken Thompson",
  },
  {
    quote: "Talk is cheap. Show me the code.",
    cite: "Linus Torvalds",
  },
  {
    quote:
      "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.",
    cite: "Martin Golding",
  },
  {
    quote:
      "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.",
    cite: "Linus Torvalds",
  },
  {
    quote:
      "Most software today is very much like an Egyptian pyramid with millions of bricks piled on top of each other, with no structural integrity, but just done by brute force and thousands of slaves.",
    cite: "Alan Kay",
  },
  {
    quote:
      "Most of you are familiar with the virtues of a programmer. There are three, of course: laziness, impatience, and hubris",
    cite: "Larry Wall",
  },
  {
    quote:
      "First learn computer science and all the theory. Next develop a programming style. Then forget all that and just hack.",
    cite: "George Carrette",
  },
];

export default {
  name: "App",
  data() {
    return { quote: {} };
  },
  methods: {
    generate() {
      const index = Math.floor(Math.random() * quotes.length);
      this.quote = quotes[index];
    },
  },
};
</script>

We have the generate button in the template to get the quotes from the quotes array.

Then we display the quote and cite properties from the selected entry.

In the template, we have the generate method to select the quote.

We do this by calling Math.floor to round down to the nearest integer.

We get a random number between 0 and quotes.length by writing Math.random() * quotes.length .

Then quotes[index] gets the choice and we assign that to this.quote so we can display the choice.

We also have to define this.quote in the data function by returning an object with the quote property.

Conclusion

We can create a random quote text generate easily with Vue 3.