0

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.

v3nt
  • 2,845
  • 6
  • 36
  • 50

1 Answers1

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
joaohis
  • 31
  • 2
  • thanks - tried `helperFunction() { return "helperFunction"; }` but it doesn't get called by ` {{ "helperFunction : " | helperFunction }}`. For the Vuepress docs there's just not enough there fo me to go on. Like where do any files go and how are they called... – v3nt Apr 23 '21 at 13:30
  • follow up: I do get an error in the browser : [Vue warn]: Failed to resolve filter: helperFunction – v3nt Apr 23 '21 at 14:08