custom filters and or plugins to run inside components

Question

We have built a large Vuejs app whose components we are now adding to Vuepress.

However we're having issues figuring out how to move over some globally use plugins and composable functions used throughout the project. They are typical helper plugins that format dates, currency and capitalisation.

An example would be to uppercase text {{ postTitle | uppercase }} and another would be called within computed or methods as uppercase(String)

I can't find any documentation for Vuepress on how to create and manage thee helper functions.

Any helpers much appreciated.

Answer 1

There are some options to apply functionalities globally to your vuepress project.

You can add your helper functions as mixins in each component, or define them globally in the enhanceApp.js file. For instance, in the code below I define globally the helperFunction() method

// enhanceApp.js
export default ({
    Vue, // the version of Vue being used in the VuePress app
    options, // the options for the root Vue instance
    router, // the router instance for the app
    siteData, // site metadata
    isServer // is this enhancement applied in server-rendering or client
}) => {
    Vue.mixin({
        methods: {
            helperFunction () {
                // Your helper function
            }
        }
    })
}

This question has a good example of defining mixins in single file components rather than the global scope. You can find more about mixins in the Vue.js documentation.

Another path is to separate your helper functions into vuepress plugins.