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.

<template>
  <div>
    <ClientOnly>
      <ConnotSSRComponent/>
    </ClientOnly>
  </div>
</template>

Redirect - $$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') {
    router.$$redirect('/bar')
    return
  }
  next()
})

Redirect in the component's lifecycle hook:







 




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

vm.$$type

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

vm.error

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

process.env.VAPPER_TARGET

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, [{/* ... */}])
    }
  }
}

process.env.VAPPER_ENV

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