The following article will explain how to register and use global properties in VueJS 3 components or templates. This is essentially what was Vue.prototype in VueJS 2. It's useful when a web developer wants to add a global property that can be accessed in any component instance within the web application.

For example, you want to have global filters to strip any html from a string, or to show an excerpt of an article or maybe convert a snake based string to human readable one.

Setup environment

As usual, we will be using VueJS 3 with the composition API + Vite for the frontend tooling, so you need to have at least NodeJS version 12 to be able to run Vite.

Scaffolding and starting your Vite/VueJs project

There are many ways of scaffolding your new project. We will be using npm in this tutorial:

$ cd ~/Code/
$ npm init vite@latest

You will be prompted to setup your new project, we've chosen the following:

$ npm init vite@latest
✔ Project name: … ipocs-global-properties-example
✔ Select a framework: › vue
✔ Select a variant: › vue

Once the project is created, use the following commands to install the dependencies and start the project in development mode:

$ cd ipocs-global-properties-example
$ npm install
$ npm run dev

Register and implement the global properties

Global properties are registered to the app VueJS instance. That being said, open your main.js file and register your custom global filters that you'd like to be available in all of your components, for example:

import { createApp } from 'vue'
import App from './App.vue'

const myApp = createApp(App)

/**
* REGISTER GLOBAL FILTERS
*/
myApp.config.globalProperties.$filters = {
    striphtml (value) {
        const div = document.createElement('div')
        div.innerHTML = value
        return div.textContent || div.innerText || ""
    },

    limitTo (value, size) {
        if (!value || !size) return ''
        return value.substring(0, size) + "..."
    },

    snakeToHuman (value) {
        if (!value) return ''
        return value.replace(/_/g, ' ')
    }
}

myApp.mount('#app')

Using the global filters in VueJS 3 templates

You can directly use your global filters via the $filters variable in your templates. For example, to strip the html from a string and show an excerpt of 100 charaters, you would do:

<div>{{ $filters.limitTo($filters.striphtml(myContent), 100) }}</div>

Using the global properties via composable method

Once you have registered your global filters you can use them in your components via the getCurrentInstance which provides access to an internal component instance.

To simplify the usage, let's create a new composable called useFilters in src/composables directory

import { getCurrentInstance } from 'vue'

export function useFilters () {
    const vm = getCurrentInstance()
    return vm.appContext.config.globalProperties.$filters
}

and then import it wherever you like to have access to your global filters, for example, edit your src/App.vue and do something like this:

<script setup>
import { computed } from 'vue'
import { useFilters } from './composables/useFilters'
import HelloWorld from './components/HelloWorld.vue'

const filters = useFilters()
const myLongString = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique exercitationem consequuntur excepturi. Accusantium suscipit fugit, cupiditate expedita sit asperiores enim dolore? Amet tenetur culpa, aspernatur ut est ipsam deleniti alias.'
const myExcerpt = computed(() => filters.limitTo(myLongString, 50))
</script>

<template>
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Hello Vue 3 + Vite" />
    <div>Excerpt using global filters:</div>
    <pre>{{ myExcerpt }}</pre>
</template>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

Project sources

The source files used in this article are available on GitHub.

Final words

Are you looking for a custom software development or IT support services? Well, look no further, we provide top-quality software developement and system administration services that will exceed even your most demanding needs. Just submit your request and we'll get back to you shortly.

In the following article we are going to create a simple breadcrumb navigation component using VueJS 3 with the composition API. In web design and web development, breadcrumb navigation allows users to keep track and maintain awareness of their locations within the web application.

Setup environment

We will be using VueJS 3 with the composition API + Vite for the frontend tooling, so you need to have at least NodeJS version 12 to be able to run Vite

Scaffolding and starting your Vite/VueJs project

There are many ways of scaffolding your new project. We will be using npm in this tutorial:

$ cd ~/Code/
$ npm init vite@latest

You will be prompted to setup your new project, we've chosen the following:

$ npm init vite@latest
✔ Project name: … ipocs-breadcrumb-navigation-example
✔ Select a framework: › vue
✔ Select a variant: › vue

Once the project is created, use the following commands to install the dependencies and start the project in development mode:

$ cd ipocs-breadcrumb-navigation-example
$ npm install
$ npm i --save-dev sass
$ npm run dev

Create the Breadcrumb component

Open your favorite editor and create a new Breadcrumbs.vue VueJS component inside your src/components directory. This component should consume data via items prop which has to be an Array of Objects with each object having at least the following properties: name and url

<template>
<nav v-if="items && items.length"
    class="my-breadcrumbs"
>
    <ol>
        <li v-for="(item, itemIndex) in items" :key="itemIndex">
            <a v-if="itemIndex !== items.length - 1"
                :href="item.url"
                :title="item.name"
                class="bc-link"
            >
                {{ item.name }}
            </a>
            <span v-else class="bc-name">{{ item.name }}</span>
            <span v-if="items[itemIndex + 1]" class="bc-separator">/</span>
        </li>
    </ol>
</nav>
</template>

<script setup>
defineProps({
    items: {
        type: Array,
        required: true
    }
})
</script>

<style lang="scss" scoped>
.my-breadcrumbs {
    background-color: #f7f7f7;
    border-radius: 4px;
    ol, ul {
        list-style-type: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 7px 15px;
        li {
            color: #222222;
            .bc-link {
                font-weight: 600;
                text-decoration: none;
                transition: all 0.5s ease;
                color: #222222;
                &:hover {
                    color: blue;
                    text-decoration: underline;
                }
            }
            // .bc-name {

            // }
            .bc-separator {
                color: hsla(0, 0%, 13%, 0.563);
                margin: 0.3rem;
            }
        }
    }
}
</style>

Using the component

To use the newly created Breadcrumbs.vue conmponent, you need to register/import it. So, edit your src/App.vue and adjust it to the following:

<script setup>
import Breadcrumbs from './components/Breadcrumbs.vue'

const myItems = [{
    name: 'IPOCS',
    url: 'https://ipocs.co'
}, {
    name: 'Articles',
    url: 'https://ipocs.co/articles'
}, {
    name: 'Web development tutorials',
    url: 'https://ipocs.co/articles?categorySlug=web-development'
}, {
    name: 'Simple breadcrumbs navigation VueJS 3 component',
    url: 'https://ipocs.co/article/foo-bar'
}]
</script>

<template>
    <Breadcrumbs :items="myItems" />
</template>

If everything is ok you should be getting the following result:

or better yet, check out the one we use on our web application which is based on this component:

Project sources

The source files used in this article are available on GitHub.

Final words

Please do not hesitate to contact us using our contact form regarding any software development or system administration requirements you may have and we'll be more than happy to work with you.

When developing web applications, or in software development in general, there is almost always the need to debounce a given value or function. What this means is that you want to make a function, input or event etc. to wait a certain amount of time before executing/evaluating.

This helps when you want to limit the number of times an action is triggered, for example when you implement search box suggestions, user inputs, or when clicking buttons to perform some expensive/time-consuming operations.

Setup environment

For this example we will be using VueJs 3 with the composition API + Vite for the frontend tooling, though it should be fairly easy to implement the same debounce functionalities in your prefered language/environment.

You need to have at least NodeJS version 12 to be able to run Vite, so make sure you install it before proceeding further.

Scaffolding and starting your Vite/VueJs project

There are many ways of scaffolding your new project, though we will be using npm as in:

$ cd ~/Code/
$ npm init vite@latest

You will be prompted to setup your new project, we've chosen the following:

$ npm init vite@latest
✔ Project name: … ipocs-debounce-example
✔ Select a framework: › vue
✔ Select a variant: › vue

Once the project is created, use the following commands to install the dependencies and start the project in development mode:

$ cd ipocs-debounce-example
$ npm install
$ npm run dev

Implement simple reactive input

Open your new VueJs project using your favorite editor and adjust src/App.vue component so it includes a simple text input, bound to a reactive variable to hold up our value:

<template>
<input
    type="text"
    name="fullName"
    placeholder="Enter your full name"
    v-model="myName"
/>
<pre>Input is: {{ myName }}</pre>
</template>

<script setup>
import { ref } from 'vue'

const myName = ref('')
</script>

In the above component, the input value is bound to a reactive myName variable which updates instantly as we type into the input text field. While in most cases this is fine, sometimes we don't want to immediatelly update the value of the reactive variable and here's where the debounce is what we need.

Implement debounce composable function for variables

So, start by creating a new directory which will hold up our composable functions and create a blank useDebounce.js file, for example:

$ mkdir src/composables
$ touch src/composables/useDebounce.js

Next, open the newly created useDebounce.js file in your editor and add the following:

import { ref, customRef } from 'vue'

const myDebounce = (fn, delay = 0, immediate = false) => {
    let timeout
    return (...args) => {
        if (immediate && !timeout) fn(...args)
        clearTimeout(timeout)

        timeout = setTimeout(() => {
            fn(...args)
        }, delay)
    }
}

const useDebounce = (initialValue, delay, immediate) => {
    const state = ref(initialValue)
    const debouncedReference = customRef(
        (myTrack, myTrigger) => ({
            get() {
                myTrack()
                return state.value
            },
            set: myDebounce(
                value => {
                    state.value = value
                    myTrigger()
                },
                delay,
                immediate
            ),
        })
    )
    return debouncedReference
}

export {
    useDebounce
}

Now, edit your src/App.vue and use the useDebounce composable to debounce the reactive input, as in:

<template>
<input
    type="text"
    name="fullName"
    placeholder="Enter your full name"
    v-model="myName"
/>
<pre>Input is: {{ myName }}</pre>
</template>

<script setup>
import { useDebounce } from './composables/useDebounce'

const myName = useDebounce('', 2000)
</script>

For the sake of this article, we've debounced the reactive myName variable for 2 seconds.

Implement debounce composable function for methods

Similar to the debounced reactive variable value, sometimes we need to debounce a given function/method. To achieve this, we need to implment similar logic which will handle this.

So, open the useDebounce.js file for editing and implement the useDebounceFn function:

import { ref, customRef } from 'vue'

const myDebounce = (fn, delay = 0, immediate = false) => {
    let timeout
    return (...args) => {
        if (immediate && !timeout) fn(...args)
        clearTimeout(timeout)

        timeout = setTimeout(() => {
            fn(...args)
        }, delay)
    }
}

const useDebounce = (initialValue, delay, immediate) => {
    const state = ref(initialValue)
    const debouncedReference = customRef(
        (myTrack, myTrigger) => ({
            get() {
                myTrack()
                return state.value
            },
            set: myDebounce(
                value => {
                    state.value = value
                    myTrigger()
                },
                delay,
                immediate
            ),
        })
    )
    return debouncedReference
}

const useDebounceFn = (fn, delay) => {
    let timeout

    return (...args) => {
        if (timeout) {
            clearTimeout(timeout)
        }

        timeout = setTimeout(() => {
            fn(...args)
        }, delay)
    }
}

export {
    useDebounce,
    useDebounceFn
}

Now, go back to your src/App.vue and utilize the useDebounceFn as in:

<template>
<input
    type="text"
    name="fullName"
    placeholder="Enter your full name"
    v-model="myName"
    :disabled="submitted"
/>
<pre>Input is: {{ myName }}</pre>

<button type="button"
    @click="handleSubmit"
    :disabled="!myName || submitted"
>
    <span v-if="!submitted">SUBMIT NAME</span>
    <span v-else>Loading...</span>
</button>
</template>

<script setup>
import { ref } from 'vue'
import {
    useDebounce,
    useDebounceFn
} from './composables/useDebounce'

const myName = useDebounce('', 600)
const submitted = ref(false)

const myDebouncedMethod = useDebounceFn(() => {
    // just reset the myName and submitted values for testing
    myName.value = ''
    submitted.value = false
}, 2000)

const handleSubmit = () => {
    submitted.value = true
    myDebouncedMethod()
}
</script>

As you can see it in action, once you fill in the input value, it's been debounced by 600ms and once you click the submit button, the handleSubmit method is immediatelly called and the submitted boolean is set to true, but the myDebouncedMethod is debounced for 2000ms, which means it will not be immediatelly fired.

Project sources

The source files for this sample project are available on GitHub.

Final words

Do you need a custom web application development or you need help from our web development team with your existing project? Please do not hesitate to contact us using our contact form and we'll get back to you shortly.

Hello world. This is our initial article on our company's website blog.

Before we start with the journey, we would like to answer some essential questions from reader's perspective, such as:

• Who are we?
• Why are we blogging?
• What will we be blogging about?

Who are we?

We are IPOCS, a custom software development & IT consulting company which strive to deliver premium quality software and support services worldwide.

Our experience in the field is over 20+ years now and we have a great team of problem solvers, engineers, developers, designers and product specialists to roll the stone for you.

Why are we blogging?

Sharing is knowledge, so we would love to share with you how IPOCS helps companies and enterprises overcome the issues and requirements they experience in their digital life.

What will we be blogging about?

We love to share with you some tips and tricks, how-to tutorials, programming & system administration articles, case studies and more.

Generally, the idea is to provide quality content for real-case scenarios so anyone in the scope could benefit from what we have learned.

This includes but it's not limited to the following:

• Real case studies
• Software development tutorials
• System administration articles
• Tips and Tricks
• News and Events

Final words

Knowledge is power, and with great power comes great responsibility. So logically, Knowledge is responsibility and we feel that we need to share some with you.

We are thrilled to start our blogging journey, so please stay tuned for more updates.