Global functions in Vue 3

Global functions

I have no idea if this is the correct way to do things, but this is the syntax I got working in Vue3. (Note! These examples apply to version three only, not two).

I created a file called “Mixins.js” directly under the “src” folder, generated by the vue-cli.

Here’s a code sample to set the document title dynamically in the Mixins.js file:

export default {
  methods: {
    setDocumentTitle(str) {
      document.title = `${str} | website-name`;
    },
  },
};

Then, in a component, I use the following:

<script>
import Mixins from '@/Mixins';

export default {
  name: 'Blog',
  mixins: [Mixins],
  mounted() {
    Mixins.methods.setDocumentTitle('Writings');
  },
};
</script>