The client API lets you install Vue plugins, register components and directives and modify the options passed to the Vue instance. You can also add router hooks and HTML metas. Start by exporting a default function in a src/main.js file in your project to use the Client API.
The function exported by
src/main.jswill be executed after all plugins.
import Bootstrap from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
export default function (Vue, context) {
Vue.use(Bootstrap)
}Create a gridsome.client.js at root in the plugin directory that exports a function. The function will receive the plugin options as second argument and the context as the third.
export default function (Vue, options, context) {
// ...
}The context has references to options for the Vue app, the VueRouter instance and VueMeta options. The file is loaded on the server and in the browser as default.
ObjectOptions passed to the main Vue Instance like new Vue(appOptions).
Here is an example where we add Vuex store to the Vue instance.
import Vuex from 'vuex'
export default function (Vue, { appOptions }) {
Vue.use(Vuex)
appOptions.store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
}VueRouterInteract with the router.
export default function (Vue, { router }) {
router.beforeEach((to, from, next) => {
// Do stuff before next page load
next()
})
}Read more about the Vue router methods.
ObjectAllows you to manage your websites' metadata.
export default function (Vue, { head }) {
head.script.push({
src: 'https://www.example.com/my-script.js'
})
}Read more about populating <head>
These methods are injected into every component.
Fetch page-query results and page context from internal pages
export default {
data () {
return {
otherPageData: null,
otherPageContext: null,
}
},
async mounted () {
try {
const results = await this.$fetch('/other-page')
this.otherPageData = results.data
this.otherPageContext = results.context
} catch (error) {
console.log(error)
}
},
}Generates URL including pathPrefix. Useful for creating internal links without g-link.
<a :href="$url('/page')"></a><a href="/path-prefix/page"></a>These properties are injected into the client process.
booleanif (process.isClient) {
// browser only code
}booleanif (process.isServer) {
// server only code
}