Selected Filters Reference


Factor filters are the most versatile and common way of altering or adding functionality to parts of your app.

In this document we provide a reference for commonly used and selected filters in the system. However note that it's possible to add filters nearly anywhere in Factor (including extensions), and often times its helpful to reference the source code to understand a particular filter's intent, possibilities and usage.

Common App Filters

Adding Routes

Routes in Factor use Vue Router. These filters add route objects to two main "parent" routes: content and dashboard, or the root routes array. All Vue Router functionality is supported via these filters.

  • Filters:
    • content-routes - Add to app's front-end (/my-route)
    • dashboard-routes - Add to dashboard (/dashboard/my-route)
    • routes - Add to root routes for app (advanced use cases)


import { addFilter } from "@factor/tools"

addFilter("content-routes", routes => {
  return [
      path: "/my-route",
      component: () => import("./component-for-my-route.vue")
      path: "/another-route",
      component: () => import("./component-for-another-route.vue")

Adding Global Components

You can add global Vue components easily using the components filter.

Global Component Example

addFilter("global-components", _ => {
  return [
      name: "my-global-component-one",
      component: () => import("./one.vue")

Post Filters

The Base "Post" Post Type

There are several filters available to extend the base "post" type which because this is the foundation of all posts, will affect all post types in your app.

Some use cases might be adding meta information like a 'social sharing' image and so on.

Post Schema

Filter: post-schema - To extend the base post schema:

// Takes and returns an object {}
addFilter("post-schema", _ => {
  return {
    myPluginSetting: { type: String, trim: true }

Filter: post-populated-fields - To extend the base schema fields that should be populated on retrieval

import { pushToFilter } from "@factor/tools"
pushToFilter("post-populated-fields", { field: "shareImage", depth: 20 })

Server Filters

Filter: server-renderer-options - Adjust server renderer options to alter SSR output. This can be particularly important for testing.

Options can be found on Vue SSR site.

// Prevent injection in template
addFilter("server-renderer-options", options => {
  options.inject = false
  options.template = (result, context) => {
    return "hi"
  return options