Interface ComponentCustomProperties

Custom properties added to component instances in any way and can be accessed through this

Example

Here is an example of adding a property $router to every component instance:

import { createApp } from 'vue'
import { Router, createRouter } from 'vue-router'

declare module 'vue' {
  interface ComponentCustomProperties {
    $router: Router
  }
}

// effectively adding the router to every component instance
const app = createApp({})
const router = createRouter()
app.config.globalProperties.$router = router

const vm = app.mount('#app')
// we can access the router from the instance
vm.$router.push('/')
interface ComponentCustomProperties {
    $graffiti: Graffiti;
    $graffitiSession: Ref<undefined | null | GraffitiSession>;
}

Properties

$graffiti $graffitiSession

Properties

$graffiti

$graffiti: Graffiti

Global Graffiti instance.

In the composition API use useGraffiti instead.

This is the same Graffiti registered with the GraffitiPlugin via GraffitiPluginOptions.graffiti, only it has been wrapped with GraffitiSynchronize. Be sure to use the wrapped instance to enable reactivity.

$graffitiSession

$graffitiSession: Ref<undefined | null | GraffitiSession>

Global reactive GraffitiSession instance as a Vue ref.

In the composition API use useGraffitiSession instead.

While the application is loading and restoring any previous sessions, the value will be undefined. If the user is not logged in, the value will be null.

This only keeps track of one session. If your app needs to support multiple login sessions, you'll need to manage them yourself using Graffiti.sessionEvents.

Settings

Member Visibility

On This Page

Properties