In this example, we will create a function for dividing two numbers, for example, 8 / 2 = 4, and another function for subtracting two numbers, for example, 8 - 2 = 6. We will inject the first function into the Vue instance and make it specifically for client-side use only, while the second one we inject into the Nuxt context and make it specifically for server-side use only:
- Create two functions and append them with .client.js and .server.js as follows:
// plugins/name-conventions/divide.client.js
import Vue from 'vue'
Vue.prototype.$divide = (x, y) => x / y
// plugins/name-conventions/subtract.server.js
export default ({ app }, inject) => {
inject('subtract', (x, y) => x - y)
}
The function file that is appended with .client.js will run on the client side only, while the function file that is appended with .server.js will run on...