Vapper injection

The <ClientOnly> Component

Some components are ssr-unfriendly components. When you use a third-party component that is not friendly to the ssr, you can wrap that component with the <ClientOnly> component injected by Vapper. Components wrapped by the <ClientOnly> component will only be rendered on the client side.


Redirect - vm.$$redirect

Vapper injects the $$redirect function on the component instance and the route instance for redirection, which is isomorphic.

  • Arguments:

    • {string} url
  • Usage:

Redirect in the routing guard:


router.beforeEach((to, from, next) => {
  if (to.path === '/foo') {

Redirect in the component's lifecycle hook:


export default {
  name: 'Foo',
  created () {
    const auth = this.$createFetcher(doAuth)
    const authRes = await auth()
    if (authRes) {


Same as vm.$$redirect.


The vm.$$type property of the component instance is a string value that identifies whether the current execution environment is on the server or on the client.


export default {
  name: 'Foo',
  created () {
    console.log(this.$$type)  // 'server' | 'client'


Same as vm.$$type.


Only the root component instance has the vm.error property, which is the error object used to implement the custom error page. For details, please see: Error Handling - Custom Error Page

Environment Variables


SSR will build the client resource and the server resource respectively. When building the client resource, the value of process.env.VAPPER_TARGET is the string 'client', when building the server resource, the value of process.env.VAPPER_TARGET is the string 'server', which can be used to control the plugin usage of webpack:

// vue.config.js
const ClientOnlyPlugin = require('client-onlu-webpack-plugin')

module.exports = {
  chainWebpack(config) {
    // Apply this plugin only when building client resources
    if (process.env.VAPPER_TARGET === 'client') {
      config.plugin('client-only-plugin').use(ClientOnlyPlugin, [{/* ... */}])


A Boolean value, equivalent to process.env.VAPPER_TARGET === 'server'.


A Boolean value, equivalent to process.env.VAPPER_TARGET === 'client'.


Alias of process.client, a Boolean value, equivalent to process.env.VAPPER_TARGET === 'client'.


The value of process.env.VAPPER_ENV is equal to the value of the mode configuration option: 'development' or 'production'.