Categories
Vue Answers

How to bind the HTML title content with Vue.js?

Sometimes, we want to bind the HTML title content with Vue.js.

In this article, we’ll look at how to bind the HTML title content with Vue.js.

How to bind the HTML title content with Vue.js?

To bind the HTML title content with Vue.js, we use the vue-meta package.

To install it, we run

npm i vue-meta

Then we use it by writing

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  metaInfo: {
    title: "Default Title",
    titleTemplate: "%s | My Awesome Webapp",
  },
};
</script>

We add the metaInfo.titleTemplate property to set the title template.

And we set the title to the page’s title.

The title will replace %s.

Conclusion

To bind the HTML title content with Vue.js, we use the vue-meta package.

Categories
Vue Answers

How to customize item-text in Vuetify v-select with Vue.js?

Sometimes, we want to customize item-text in Vuetify v-select with Vue.js.

In this article, we’ll look at how to customize item-text in Vuetify v-select with Vue.js.

How to customize item-text in Vuetify v-select with Vue.js?

To customize item-text in Vuetify v-select with Vue.js, we fill in the selection and item slot.

For instance, we write

<template>
  <v-select
    label="Names"
    v-model="name"
    :items="names"
    item-value="id"
    item-text="name"
    return-object
  >
    <template v-slot:selection="{ item }">
      {{ getText(item) }}
    </template>
    <template v-slot:item="{ item }">
      {{ getText(item) }}
    </template>
  </v-select>
</template>

<script>
export default {
  data: () => ({
    names: [
      { id: 1, name: "Paul", age: 23 },
      { id: 2, name: "Marcelo", age: 15 },
      { id: 3, name: "Any", age: 30 },
    ],
    name: null,
  }),
  methods: {
    getText: (item) => `${item.name} - ${item.age}`,
  },
};
</script>

to fill in the selection slot to customize the text for the selection.

And we fill in the slot:item slot to customize the text for the drop down options.

item has the entry in names array for the selection slot.

And item has the entry in names array being rendered in the drop down.

Conclusion

To customize item-text in Vuetify v-select with Vue.js, we fill in the selection and item slot.

Categories
Vue Answers

How to add attribute dynamically in Vue.js?

Sometimes, we want to add attribute dynamically in Vue.js.

In this article, we’ll look at how to add attribute dynamically in Vue.js.

How to add attribute dynamically in Vue.js?

To add attribute dynamically in Vue.js, we use v-bind.

For instance, we write

<template>
  <input
    type="text"
    :disabled="disabled"
    :placeholder="placeholder"
    v-model="value"
  />
</template>

to add the disabled and placeholder attributes dynamically.

:disabled is short for v-bind:disabled.

And :placeholder is short for v-placeholder.

We set disabled to the value of the disabled reactive property.

And we set placeholder to the value of the placeholder reactive property.

Conclusion

To add attribute dynamically in Vue.js, we use v-bind.

Categories
Vue Answers

How to watch props change with Vue Composition API and Vue 3?

Sometimes, we want to watch props change with Vue Composition API and Vue 3.

In this article, we’ll look at how to watch props change with Vue Composition API and Vue 3.

How to watch props change with Vue Composition API and Vue 3?

To watch props change with Vue Composition API and Vue 3, we can use the watch function.

For instance, we write

watch(() => props.selected, (selection, prevSelection) => { 
   /* ... */ 
})

to call watch to watch the selected prop.

We get the latest and previous value of it from the parameters in the 3rd argument.

Also, we can also put the prop in a ref and watch the ref with

const selected = ref(props.selected);

watch(selected, (selection, prevSelection) => {
  /* ... */
});

And we can watch multiple refs with

watch([ref1, ref2], ([refVal1, refVal2], [prevRef1, prevRef2]) => {
  /* ... */
});

Conclusion

To watch props change with Vue Composition API and Vue 3, we can use the watch function.

Categories
Vue Answers

How to center content vertically on Vuetify?

Sometimes, we want to center content vertically on Vuetify.

In this article, we’ll look at how to center content vertically on Vuetify.

How to center content vertically on Vuetify?

To center content vertically on Vuetify, we can use the align and justify props.

For instance, we write

<template>
  <v-container fill-height fluid>
    <v-row align="center" justify="center">
      <v-col></v-col>
    </v-row>
  </v-container>
</template>

to set the align and justify props to set the align-items and justify-content CSS properties respectivelt on the v-row.

Since align is set to center, the content should be vertically centered.

Conclusion

To center content vertically on Vuetify, we can use the align and justify props.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.