Categories
Books Vue 3 Vue 3 Projects

Buy Vue.js 3 By Example Now

Want to learn Vue 3 fast? Vue.js 3 By Example is out now.

Buy it now at https://www.packtpub.com/product/vue-js-3-by-example/9781838826345

Categories
Vue 3

How to Add a Menu with Active Item Highlighting with Vue 3?

Sometimes we want to add a menu with the active menu item highlighted in our Vue 3 app.

In this article, we’ll look at how to add a menu with active item highlighting with Vue 3.

Add a Menu with Active Item Highlighting

To add a menu with the active item highlighting in our Vue 3 app, we can listen to the mouseenter and mouseleave events.

We add the highlight to the item that’s hovered over when the mouseenter event is emitted.

And when the mouseleave event is emitted, we clear the highlights on all items.

To do this, we write:

<template>
  <ul>
    <li
      :class="{ hovered: hoveredItem === 'apple' }"
      @mouseenter="hoveredItem = 'apple'"
      @mouseleave="resetHover()"
    >
      apple
    </li>
    <li
      :class="{ hovered: hoveredItem === 'orange' }"
      @mouseenter="hoveredItem = 'orange'"
      @mouseleave="resetHover()"
    >
      orange
    </li>
    <li
      :class="{ hovered: hoveredItem === 'grape' }"
      @mouseenter="hoveredItem = 'grape'"
      @mouseleave="resetHover()"
    >
      grape
    </li>
    <li
      :class="{ hovered: hoveredItem === 'pear' }"
      @mouseenter="hoveredItem = 'pear'"
      @mouseleave="resetHover()"
    >
      pear
    </li>
    <li
      :class="{ hovered: hoveredItem === 'banana' }"
      @mouseenter="hoveredItem = 'banana'"
      @mouseleave="resetHover()"
    >
      banana
    </li>
  </ul>
</template>

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

<style scoped>
.hovered {
  color: red;
}
</style>

We have the li elements that have the hovered class applied dynamically.

We apply the class when the hoveredItem ‘s value is the same one that’s set in the mouseenter event handler.

And we call the resetHover method to reset hoveredItem to an empty string when our mouse leaves an item.

We have the hoveredItem reactive property to keep track of which item is highlighted.

And we have the .hovered class that has the color set to red to add the highlighting.

Now when we hover over an item, we should see the item that our mouse hovered over becomes red.

When our mouse leaves the item, then the items turn back to black.

Conclusion

We can add a menu with active items highlighting with Vue 3 easily.

To do this, we just listen to the mouseenter and mouseleave events and applies the class to add the highlight accordingly.

Categories
Vue 3

How to Call a Vue.js 3 Component Method from Outside the Component?

Sometimes, we may want to call a Vue 3 component method from outside the component.

In this article, we’ll look at how to call a Vue 3 component method from outside the component.

Assign a Ref to the Component and Call the Method From it

We can assign a ref to a component and get the method from the ref object and call it.

For instance, we can write:

App.vue

<template>
  <HelloWorld ref="helloWorld" />
  <button @click="greet">greet</button>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  methods: {
    greet() {
      this.$refs.helloWorld.greet("jane");
    },
  },
};
</script>

components/HelloWorld.vue

<template>
  <div>hello world</div>
</template>

<script>
export default {
  methods: {
    greet(name) {
      console.log(`hello world ${name}`);
    },
  },
};
</script>

We assign the helloWorld ref to the HelloWorld component.

Then we add the greet method that calls this.$refs.helloWorld.greet method which is the greet method from the HelloWorld component.

Therefore, we should see the 'hello world jane' logged when we click the greet button.

This lets us call a method in the child component from the parent.

Send an Event from the Child Component to the Parent

If we want to call a method in the parent component from the child component, then we should call the $emit method from the child component and listen to the event emitted by the child component in the parent component.

For instance, we can write:

App.vue

<template>
  <HelloWorld @greet="greet" />
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  methods: {
    greet(name) {
      console.log(`hello world ${name}`);
    },
  },
};
</script>

components/HelloWorld.vue

<template>
  <div>hello world</div>
  <button @click="greet">greet</button>
</template>

<script>
export default {
  methods: {
    greet() {
      this.$emit("greet", "jane");
    },
  },
};
</script>

In HelloWorld.vue , we have the greet method which calls this.$emit with the event name as the first argument and the event payload as the 2nd argument.

Subsequent arguments are also event payloads which will be used as 2nd and subsequent arguments of the event handler method.

Then in App.vue , listen to the greet event with the @greet directive.

We set its value to greet to get the value we passed in as the 2nd argument.

So name is 'jane' .

And we should see 'hello world jane' logged when we click the greet button.

Conclusion

To call methods in a child component from the parent, we assign a ref to the component and get its methods from there.

If we want to call a method in the parent component from the child, then we emit an event in the child component and listen to that event in the parent component.

Categories
Vue 3

How to Get Query Parameters from a URL in Vue.js 3 with Vue Router 4?

Sometimes, we may want to add query parameters to route URLs so that we can get the query parameters in the component.

In this article, we’ll look at how to get query parameters from a URL in a Vue 3 app that uses Vue Router 4.

Get Query Parameters from a URL in Vue.js 3 with Vue Router 4

To get query parameter from a URL in a Vue 3 app that uses Vue Router 4, we can get the query parameters from the this.$route.query property.

main.js

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import Page1 from "./views/Page1";
import Page2 from "./views/Page2";
import Page3 from "./views/Page3";

const routes = [
  { path: "/", component: Page1 },
  { path: "/page2", component: Page2 },
  { path: "/page3", component: Page3 }
];

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

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

App.vue

<template>
  <router-link to="/">page 1</router-link>
  <router-link to="/page2">page 2</router-link>
  <router-link to="/page3">page 3</router-link>
  <router-view></router-view>
</template>

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

views/Page1.vue

<template>
  <div>page 1</div>
</template>

views/Page2.vue

<template>
  <div>page 2</div>
</template>

views/Page3.vue

<template>
  <div>page 3 {{ $route.query.foo }}</div>
</template>

<script>
export default {};
</script>

We set up the routes in main.js .

We import the page components and put them in the routes array.

Next, we call createRouter to create the router object.

Then we add the routes to the object we pass into createRouter ,

Then we have:

app.use(router);

to add the router to our app.

In Page3.vue , we have $router.query.foo in the template to get the foo query parameter.

This is the same as this.$router.query.foo in the component object.

In App.vue , we have the 3rd router-link ‘s to prop with a query string added after the path.

So when we click the link, we should see ‘bar’ displayed since we have foo=bar in the query string.

Conclusion

We can get query parameters in our Vue 3 app that uses Vue Router 4 with the this.$route.query property in a component.

Categories
Vue 3

How to Remove the Hash from the URL with Vue Router 4?

Sometimes, we want to map our components to paths that don’t have a hash in front of it in our Vue 3 app that uses Vue Router 4.

In this article, we’ll look at how to remove the hash from the URL path with Vue Router 4.

Remove the Hash from the URL with Vue Router 4

We can remove the hash from the URLs with Vue Router 4 by calling the createWebHistory method.

For instance, we can write:

main.js

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import Page1 from "./views/Page1";
import Page2 from "./views/Page2";
import Page3 from "./views/Page3";

const routes = [
  { path: "/", component: Page1 },
  { path: "/page2", component: Page2 },
  { path: "/page3", component: Page3 }
];

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

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

App.vue

<template>
  <router-link to="/">page 1</router-link>
  <router-link to="/page2">page 2</router-link>
  <router-link to="/page3">page 3</router-link>
  <router-view></router-view>
</template>

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

views/Page1.vue

<template>
  <div>page 1</div>
</template>

views/Page2.vue

<template>
  <div>page 2</div>
</template>

views/Page3.vue

<template>
  <div>page 3</div>
</template>

In main.js , we have the routes array with the route definitions.

We map the URL paths to components.

Then we call createRouter with an object that has the history property set to value returned by createWebHistory .

createWebHistory set the router to HTML5 history mode to remove the hash.

This will remove the hash from the paths that are mapped by Vue Router 4.

We also set the routes property to the routes array to add the routes we created.

Next, we call app.use with router to add the router object.

In App.vue , we have the router-link s to render the links.

router-view render the route page components.

Page1 , Page2 and Page3 are route components.

Now when we click on the router links, we shouldn’t see the hash in between the hostname and the route paths.

Conclusion

We can remove the hash from the URL with Vue Router 4’s createWebHistory function.