diff --git a/.eslintrc.js b/.eslintrc.js
index c83fa4d08..e5a316339 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -37,7 +37,7 @@ module.exports = {
         objects: 'only-multiline',
         imports: 'only-multiline',
         exports: 'only-multiline',
-        functions: 'never',
+        functions: 'only-multiline',
       },
     ],
     'template-curly-spacing': [
diff --git a/src/components/cylc/workflow/Lumino.vue b/src/components/cylc/workflow/Lumino.vue
index 2bc067bfc..08149011e 100644
--- a/src/components/cylc/workflow/Lumino.vue
+++ b/src/components/cylc/workflow/Lumino.vue
@@ -18,23 +18,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div ref="main" class="main pa-2 fill-height">
     <!-- Lumino box panel gets inserted here -->
   </div>
-  <div v-show="false">
-    <!-- Hidden div acts as staging area for views before they are
-    moved into a lumino widget -->
-    <component
-      v-for="(item, id) of views"
-      :key="id"
-      :ref="(ref) => setViewRef(id, ref)"
-      :is="item.view"
-      :tab-title="getTabTitle(item.view)"
-      :workflow-name="workflowName"
-      :initialOptions="item.initialOptions"
-      class="h-100"
-    />
-  </div>
+  <template
+    v-for="(item, id) in views"
+    :key="id"
+  >
+    <Teleport :to="`#${id}`">
+      <component
+        :is="item.view"
+        :workflow-name="workflowName"
+        :initialOptions="item.initialOptions"
+        class="h-100"
+      />
+    </Teleport>
+  </template>
 </template>
 
 <script>
+import { startCase } from 'lodash'
 import LuminoWidget from '@/components/cylc/workflow/lumino-widget'
 import { BoxPanel, DockPanel, Widget } from '@lumino/widgets'
 
@@ -74,15 +74,6 @@ export default {
       type: Array,
       required: true
     },
-    /**
-     * Prop to customize the tab title. Defaults to name.
-     * If a component does not have the $component.$tabTitleProp
-     * set, then we still revert to the old default $component.name.
-     */
-    tabTitleProp: {
-      type: String,
-      default: 'name'
-    }
   },
 
   emits: [
@@ -90,11 +81,10 @@ export default {
     'lumino:deleted'
   ],
 
-  data () {
-    return {
-      /** Keep track of views' refs separate from $refs in order to access
-       * by ID */
-      viewRefs: {}
+  beforeCreate () {
+    // Populate components
+    for (const { name, component } of this.allViews) {
+      this.$options.components[name] = component
     }
   },
 
@@ -103,12 +93,6 @@ export default {
    * Box panel. In the next tick of Vue, the DOM element and the Vue element/ref are attached.
    */
   created () {
-    // We need to load each view used by this view/component.
-    // See "local-registration" in Vue.js documentation.
-    this.allViews.forEach(view => {
-      this.$options.components[view.name] = view
-    })
-
     // create a box panel, which holds the dock panel, and controls its layout
     this.box = new BoxPanel({ direction: 'left-to-right', spacing: 0 })
     // create dock panel, which holds the widgets
@@ -152,40 +136,27 @@ export default {
   },
 
   methods: {
-    /** Keep track of views' refs separate from $refs, allowing access by ID */
-    setViewRef (id, ref) {
-      if (ref) {
-        this.viewRefs[id] = ref
-      } else {
-        delete this.viewRefs[id]
-      }
-    },
     /**
      * Look for newly added views, creating a corresponding Lumino Widget
      * for each.
      */
     syncWidgets (newVal, oldVal) {
-      const { tabTitleProp } = this.$props
       for (const [id, item] of Object.entries(newVal)) {
         if (!(id in oldVal)) {
-          const view = this.$options.components[item.view]
-          const name = view[tabTitleProp] ?? view.name
-          this.addWidget(id, name)
+          this.addWidget(id, item.view)
         }
       }
     },
 
     /**
-     * Create a widget, add it to the dock, and move the corresponding view
-     * from the hidden div into it.
+     * Create a widget and add it to the dock.
      */
     addWidget (id, name, onTop = true) {
-      const luminoWidget = new LuminoWidget(id, name, /* closable */ true)
+      const luminoWidget = new LuminoWidget(id, startCase(name), /* closable */ true)
       this.dock.addWidget(luminoWidget, { mode: 'tab-after' })
       // give time for Lumino's widget DOM element to be created
       this.$nextTick(() => {
         const widgetEl = document.getElementById(id)
-        widgetEl.appendChild(this.viewRefs[id].$el)
         widgetEl.addEventListener('lumino:activated', this.onWidgetActivated)
         widgetEl.addEventListener('lumino:deleted', this.onWidgetDeleted)
         if (onTop) {
@@ -227,10 +198,6 @@ export default {
       widgetEl.removeEventListener('lumino:activated', this.onWidgetActivated)
       this.$emit('lumino:deleted', customEvent.detail)
     },
-
-    getTabTitle (viewName) {
-      return this.$options.components[viewName].data().widget.title
-    }
   }
 }
 </script>
diff --git a/src/components/cylc/workflow/Toolbar.vue b/src/components/cylc/workflow/Toolbar.vue
index 732a14811..eddf5f558 100644
--- a/src/components/cylc/workflow/Toolbar.vue
+++ b/src/components/cylc/workflow/Toolbar.vue
@@ -89,6 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <v-spacer class="mx-0" />
 
       <v-btn
+        v-if="$route.name === 'workspace'"
         class="add-view"
         color="primary"
         data-cy="add-view-btn"
@@ -101,20 +102,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-menu
           activator="parent"
           location="bottom"
-          v-if="$route.name === 'workspace'"
-        >
-          <v-list class="pa-0">
+          >
+          <v-list>
             <v-list-item
-              :id="`toolbar-add-${ view.name }-view`"
               v-for="view in views"
+              :id="`toolbar-add-${ view.name }-view`"
               :key="view.name"
               @click="$emit('add', { viewName: view.name })"
-              class="py-0 px-8 ma-0 c-add-view"
             >
               <template v-slot:prepend>
-                <v-icon>{{ view.data().widget.icon }}</v-icon>
+                <v-icon>{{ view.icon }}</v-icon>
               </template>
-              <v-list-item-title>{{ view.name }}</v-list-item-title>
+              <v-list-item-title>{{ startCase(view.name) }}</v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>
@@ -148,6 +147,7 @@ import {
   mdiStop,
   mdiViewList
 } from '@mdi/js'
+import { startCase } from 'lodash'
 import toolbar from '@/mixins/toolbar'
 import WorkflowState from '@/model/WorkflowState.model'
 import graphql from '@/mixins/graphql'
@@ -158,20 +158,24 @@ import {
 
 export default {
   name: 'Toolbar',
+
   mixins: [
     toolbar,
     graphql
   ],
+
   props: {
     views: {
       type: Array,
       required: true
     }
+
   },
+
   emits: ['add'],
+
   data: () => ({
     extended: false,
-    // FIXME: remove local state once we have this data in the workflow - https://github.com/cylc/cylc-ui/issues/221
     svgPaths: {
       add: mdiPlusBoxMultiple,
       hold: mdiPause,
@@ -187,6 +191,7 @@ export default {
       stop: null
     }
   }),
+
   computed: {
     ...mapState('app', ['title']),
     ...mapState('user', ['user']),
@@ -253,6 +258,7 @@ export default {
       }
     }
   },
+
   watch: {
     isRunning () {
       this.expecting.play = null
@@ -264,6 +270,7 @@ export default {
       this.expecting.stop = null
     }
   },
+
   methods: {
     onClickPlay () {
       this.$workflowService.mutate(
@@ -285,7 +292,7 @@ export default {
         }
       })
     },
-    async onClickStop () {
+    onClickStop () {
       this.$workflowService.mutate(
         'stop',
         this.currentWorkflow.id
@@ -297,7 +304,8 @@ export default {
     },
     toggleExtended () {
       this.extended = !this.extended
-    }
+    },
+    startCase,
   }
 }
 </script>
diff --git a/src/views/Analysis.vue b/src/views/Analysis.vue
index b597755f1..b36426751 100644
--- a/src/views/Analysis.vue
+++ b/src/views/Analysis.vue
@@ -88,7 +88,6 @@ import {
   platformOptions
 } from '@/components/cylc/analysis/filter'
 import {
-  mdiChartLine,
   mdiRefresh
 } from '@mdi/js'
 
@@ -185,10 +184,6 @@ export default {
   data () {
     const tasks = []
     return {
-      widget: {
-        title: 'analysis',
-        icon: mdiChartLine
-      },
       /** Defines controls which get added to the toolbar */
       groups: [
         {
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index f92a13d28..4ce46a434 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -108,7 +108,6 @@ import {
 import { Graphviz } from '@hpcc-js/wasm/graphviz'
 import svgPanZoom from 'svg-pan-zoom'
 import {
-  mdiGraph,
   mdiTimer,
   mdiImageFilterCenterFocus,
   mdiArrowCollapse,
@@ -219,10 +218,6 @@ export default {
 
   data () {
     return {
-      widget: {
-        title: 'graph',
-        icon: mdiGraph
-      },
       // the graph orientation
       orientation: 'TB',
       // the auto-refresh timer
diff --git a/src/views/Log.vue b/src/views/Log.vue
index bd16904ff..d1f225f21 100644
--- a/src/views/Log.vue
+++ b/src/views/Log.vue
@@ -141,7 +141,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import {
   mdiClockOutline,
-  mdiFileDocumentMultipleOutline,
   mdiFolderRefresh,
   mdiPowerPlugOff,
   mdiPowerPlug
@@ -253,11 +252,6 @@ export default {
 
   data () {
     return {
-      // metadata for the workspace view
-      widget: {
-        title: 'logs',
-        icon: mdiFileDocumentMultipleOutline
-      },
       // the log subscription query
       query: null,
       // list of log files for the selected workflow/task/job
diff --git a/src/views/SimpleTree.vue b/src/views/SimpleTree.vue
new file mode 100644
index 000000000..f03db76ca
--- /dev/null
+++ b/src/views/SimpleTree.vue
@@ -0,0 +1,238 @@
+<!--
+Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<!--
+  This is a bare-bones text-based tree view that displays live workflow data.
+
+  It is intended to serve as a basis for future live-view development and to
+  serve as functional documentation for view writing.
+
+  NOTE:
+    This view is not available in "production" mode.
+-->
+
+<template>
+  <div class="c-simple-tree">
+    <!-- Iterate over the root nodes. -->
+    <ul
+      v-for="node of workflows"
+      :key="node.id"
+    >
+      <li>
+        <b>{{ node.id }}</b>
+        <!-- Then iterate over the children of those nodes.
+
+          NOTE:
+            "node.children" is always present on a node so you shouldn't have to
+            do "node.children || []" here.
+          NOTE:
+            "node.id" is a good choice for the ":key" as every node in the store
+            has a unique ID.
+        -->
+        <ul
+          v-for="node1 of node.children"
+          :key="node1.id"
+        >
+          <li>
+            <!-- "node.name" is always provided for all nodes. Use this NOT
+              node.node.name to save requesting unnecessary data -->
+            <span class="name">{{ node1.name }}</span>
+            <!-- Attributes requested in the QUERY will be available in
+              "node.node".
+
+              NOTE:
+                The data store promises to make this information available but
+                doesn't make any promises about when it will make this available.
+                Just because a node exists in the store doesn't mean it will have
+                all of the data you requested, yet. Code defensibly in
+                anticipation of "undefined" keys.
+            -->
+            <span class="state">{{ node1.node.state }}</span>
+            <!-- Then keep iterating down the tree.
+
+              NOTE:
+                We would normally use a recursive component to do this as we
+                don't know how deep the tree is going to be, however, to keep
+                this simple we will just hardcode it.
+            -->
+            <ul
+              v-for="node2 of node1.children"
+              :key="node2.id"
+            >
+              <li>
+                <span class="name">{{ node2.name }}</span>
+                <span class="state">{{ node2.node.state }}</span>
+                <ul
+                  v-for="node3 of node2.children"
+                  :key="node3.id"
+                >
+                  <li>
+                    <span class="name">{{ node3.name }}</span>
+                    <span class="state">{{ node3.node.state }}</span>
+                    <ul
+                      v-for="node4 of node3.children"
+                      :key="node4.id"
+                    >
+                      <li>
+                        <span class="name">{{ node4.name }}</span>
+                        <span class="state">{{ node4.node.state }}</span>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import { mapState, mapGetters } from 'vuex'
+import { getPageTitle } from '@/utils/index'
+import graphqlMixin from '@/mixins/graphql'
+import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
+import SubscriptionQuery from '@/model/SubscriptionQuery.model'
+
+// Any fields that our view will use (e.g. TaskProxy.status) must be requested
+// in the query.
+// Most of this is just boilerplate the important thing is the three declarations
+// at the end.
+const QUERY = gql`
+subscription SimpleTreeSubscription ($workflowId: ID) {
+  deltas(workflows: [$workflowId]) {
+    ...Deltas
+  }
+}
+
+fragment Deltas on Deltas {
+  added {
+    ...AddedDelta
+  }
+  updated (stripNull: true) {
+    ...UpdatedDelta
+  }
+  pruned {
+    ...PrunedDelta
+  }
+}
+
+fragment AddedDelta on Added {
+  taskProxies {
+    ...TaskProxyData
+  }
+  jobs {
+    ...JobData
+  }
+}
+
+fragment UpdatedDelta on Updated {
+  taskProxies {
+    ...TaskProxyData
+  }
+  jobs {
+    ...JobData
+  }
+}
+
+# We must list all of the types we request data for here to enable automatic
+# housekeeping.
+fragment PrunedDelta on Pruned {
+  workflow
+  taskProxies
+  jobs
+}
+
+# We must always request the "id" for ALL types.
+# The only field this view requires beyond that is the status.
+fragment TaskProxyData on TaskProxy {
+  id
+  state
+}
+
+# Same for jobs.
+fragment JobData on Job {
+  id
+  state
+}
+`
+
+export default {
+  name: 'SimpleTree',
+
+  // These mixins enable various functionalities.
+  mixins: [
+    graphqlMixin,
+    subscriptionComponentMixin
+  ],
+
+  // This sets the page title.
+  head () {
+    return {
+      title: getPageTitle('App.workflow', { name: this.workflowName })
+    }
+  },
+
+  computed: {
+    // This gives us direct access to the data store if we need it:
+    ...mapState('workflows', ['cylcTree']),
+
+    // This gives us a convenient way to filter for the nodes we want from the
+    // store:
+    ...mapGetters('workflows', ['getNodes']),
+
+    // List of workflow IDs we are displaying.
+    // NOTE: Write all views to be multi-workflow capable.
+    // NOTE: workflowId is provided by a mixin.
+    workflowIDs () {
+      return [this.workflowId]
+    },
+
+    // Get workflow nodes from the store.
+    workflows () {
+      // This returns all nodes of type "workflow" with ids which are in
+      // this.workflowIDs
+      return this.getNodes('workflow', this.workflowIDs)
+    },
+
+    // This registers the query with the WorkflowService, once registered, the
+    // WorkflowService promises to make the data defined by the query available
+    // in the store and to keep it up to date.
+    query () {
+      return new SubscriptionQuery(QUERY, this.variables, 'workflow', [])
+    }
+  }
+
+}
+</script>
+
+<style lang="scss">
+  .c-simple-tree {
+    ul, ol {
+      padding-left: 24px;
+    }
+    .state::before {
+      content: ' ';
+    }
+    .state {
+      color: grey;
+    }
+  }
+</style>
diff --git a/src/views/Table.vue b/src/views/Table.vue
index 6243ae458..4fa52d93e 100644
--- a/src/views/Table.vue
+++ b/src/views/Table.vue
@@ -27,7 +27,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { mdiTable } from '@mdi/js'
 import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
@@ -55,13 +54,6 @@ export default {
     }
   },
 
-  data: () => ({
-    widget: {
-      title: 'table',
-      icon: mdiTable
-    }
-  }),
-
   computed: {
     ...mapState('workflows', ['cylcTree']),
     ...mapGetters('workflows', ['getNodes']),
diff --git a/src/views/Tree.vue b/src/views/Tree.vue
index 7c6d79aa6..489383a41 100644
--- a/src/views/Tree.vue
+++ b/src/views/Tree.vue
@@ -35,7 +35,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { mdiFileTree } from '@mdi/js'
 import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
@@ -61,15 +60,6 @@ export default {
     }
   },
 
-  data () {
-    return {
-      widget: {
-        title: 'tree',
-        icon: mdiFileTree
-      }
-    }
-  },
-
   computed: {
     ...mapState('workflows', ['cylcTree']),
     ...mapGetters('workflows', ['getNodes']),
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index c945a5cd3..cf63d5464 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -28,7 +28,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         ref="lumino"
         @lumino:deleted="onWidgetDeletedEvent"
         :views="widgets"
-        tab-title-prop="tab-title"
         :workflow-name="workflowName"
         :allViews="$options.allViews"
       />
@@ -37,19 +36,45 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue'
 import { uniqueId } from 'lodash'
 import { toArray } from '@lumino/algorithm'
+import {
+  mdiChartLine,
+  mdiFileDocumentMultipleOutline,
+  mdiFileTree,
+  mdiGraph,
+  mdiTable,
+  mdiTree,
+} from '@mdi/js'
 import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionMixin from '@/mixins/subscription'
 import ViewState from '@/model/ViewState.model'
 import Lumino from '@/components/cylc/workflow/Lumino.vue'
 import Toolbar from '@/components/cylc/workflow/Toolbar.vue'
-import TableView from '@/views/Table.vue'
-import TreeView from '@/views/Tree.vue'
-import GraphView from '@/views/Graph.vue'
-import LogView from '@/views/Log.vue'
-import AnalysisView from '@/views/Analysis.vue'
+
+// Use dynamic async components for lazy loading:
+const TreeView = defineAsyncComponent(() => import('@/views/Tree.vue'))
+const TableView = defineAsyncComponent(() => import('@/views/Table.vue'))
+const GraphView = defineAsyncComponent(() => import('@/views/Graph.vue'))
+const LogView = defineAsyncComponent(() => import('@/views/Log.vue'))
+const AnalysisView = defineAsyncComponent(() => import('@/views/Analysis.vue'))
+const SimpleTreeView = defineAsyncComponent(() => import('@/views/SimpleTree.vue'))
+
+const allViews = [
+  { name: 'Tree', component: TreeView, icon: mdiFileTree },
+  { name: 'Table', component: TableView, icon: mdiTable },
+  { name: 'Graph', component: GraphView, icon: mdiGraph },
+  { name: 'Log', component: LogView, icon: mdiFileDocumentMultipleOutline },
+  { name: 'Analysis', component: AnalysisView, icon: mdiChartLine },
+]
+// Development views that we don't want in production:
+if (import.meta.env.MODE !== 'production') {
+  allViews.push(
+    { name: 'SimpleTree', component: SimpleTreeView, icon: mdiTree },
+  )
+}
 
 export default {
   name: 'Workspace',
@@ -91,7 +116,7 @@ export default {
     next(vm => {
       vm.$workflowService.startSubscriptions()
       vm.$nextTick(() => {
-        vm.addView({ viewName: TreeView.name })
+        vm.addView({ viewName: 'Tree' })
       })
     })
   },
@@ -102,7 +127,7 @@ export default {
     // and in the next tick as otherwise we would get stale/old variables for the graphql query
     this.$nextTick(() => {
       // Create a Tree View for the current workflow by default
-      this.addView({ viewName: TreeView.name })
+      this.addView({ viewName: 'Tree' })
     })
   },
 
@@ -125,7 +150,7 @@ export default {
      * viewName - the name of the view to be added (Vue component name).
      */
     addView ({ viewName, initialOptions = {} }) {
-      this.widgets[uniqueId()] = { view: viewName, initialOptions }
+      this.widgets[uniqueId('widget_')] = { view: viewName, initialOptions }
     },
     /**
      * Remove all the widgets present in the DockPanel.
@@ -170,12 +195,6 @@ export default {
    *
    * @type {Object[]}
    */
-  allViews: [
-    TreeView,
-    TableView,
-    GraphView,
-    LogView,
-    AnalysisView,
-  ]
+  allViews,
 }
 </script>