Akshansh Khare

Client API

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.js will 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)
}

Usage in plugins

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 client 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.

appOptions

  • Type: Object

Options 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++
      }
    }
  })
}

router

  • Type: VueRouter

Interact 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.

  • Type: Object

Allows 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>

Component Injections

These methods are injected into every component.

$fetch(path)

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)
    }
  }
}

$url(path)

Generates URL including pathPrefix. Useful for creating internal links without g-link.

<a :href="$url('/page')"></a>
<a href="/path-prefix/page"></a>

Process Injections

These properties are injected into the client process.

isClient

  • Type: boolean
if (process.isClient) {
  // browser only code
}

isServer

  • Type: boolean
if (process.isServer) {
  // server only code
}
← Pages APITransformer API →