From 2df0897cbbb023c1d81cb13d594d63bcce49c0c5 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Sun, 11 Oct 2026 18:38:18 +0100
Subject: [PATCH 1/2] feat: Vue and Vuetify editing in the ui-template code
 editor

The ui-template editor treats a Vue template as plain HTML: no Vue syntax, no help
with Vuetify components. This adds a `vue-sfc` language for Node-RED's Monaco editor,
shipped as an editor plugin with the Dashboard, so nothing is added to Node-RED core.

- Vue highlighting: directives, bindings, events, slots and {{ }} as JavaScript;
  <script> and <style> blocks (TS, SCSS and Less with lang=)
- Completion and hover for Vuetify components, props, bound props, events, slots,
  prop values and directives, plus Vue's own directives and components
- Vuetify data is generated at build time from the Vuetify version the Dashboard
  bundles (scripts/build-vue-editor-data.js), and loaded only when a ui-template
  editor is first opened
- Plain HTML completion, hover and formatting from Monaco's html worker
- ui-template uses the new language with Monaco; ACE keeps the HTML mode
---
 .gitignore                           |   5 +-
 docs/en/nodes/widgets/ui-template.md |  10 +
 nodes/plugins/vue-editor.html        |  79 ++++
 nodes/widgets/ui_template.html       |  17 +-
 package.json                         |  13 +-
 resources/vue-editor/vue-sfc.mjs     | 608 +++++++++++++++++++++++++++
 scripts/build-vue-editor-data.js     |  62 +++
 test/resources/vue-editor.spec.js    | 154 +++++++
 8 files changed, 937 insertions(+), 11 deletions(-)
 create mode 100644 nodes/plugins/vue-editor.html
 create mode 100644 resources/vue-editor/vue-sfc.mjs
 create mode 100644 scripts/build-vue-editor-data.js
 create mode 100644 test/resources/vue-editor.spec.js

diff --git a/.gitignore b/.gitignore
index 1f5d3156a..951a0d441 100644
--- a/.gitignore
+++ b/.gitignore
@@ -147,4 +147,7 @@ docs/.vitepress/cache/
 /cypress/fixtures/user-dir/flows.json
 /cypress/fixtures/user-dir/.flows.json.backup   
 /cypress/screenshots
-/cypress/downloads
\ No newline at end of file
+/cypress/downloads
+
+# Generated by scripts/build-vue-editor-data.js
+/resources/vue-editor/vuetify.json
diff --git a/docs/en/nodes/widgets/ui-template.md b/docs/en/nodes/widgets/ui-template.md
index 40993cf18..6e4829f11 100644
--- a/docs/en/nodes/widgets/ui-template.md
+++ b/docs/en/nodes/widgets/ui-template.md
@@ -38,6 +38,16 @@ Provide custom JS and HTML (including any [Vuetify components](https://vuetifyjs
 
 <DynamicPropsTable/>
 
+## Code Editor
+
+When Node-RED uses its default Monaco code editor, the template editor understands Vue templates:
+
+- Vue syntax is highlighted, including directives (`v-if`, `v-for`, ...), bindings (`:prop`), events (`@click`), slots (`#activator`) and `{{ }}` expressions, which are highlighted as JavaScript.
+- Typing `<v-` suggests Vuetify components. Inside a Vuetify tag, you get suggestions for its props, bound props (`:`), events (`@`) and, on a `<template>` inside a component, that component's slots (`#`). Props with a fixed set of values, such as `variant`, suggest those values.
+- Hovering over a Vuetify component, prop, event or slot shows its type, default and description, with a link to the Vuetify API docs.
+
+The component information matches the version of Vuetify that ships with the Dashboard and is loaded from Node-RED itself, so it works offline. Editors using ACE keep the plain HTML mode.
+
 ## Writing Custom Widgets
 
 UI Template will parse different tags and render them into Dashboard. The available tags are:
diff --git a/nodes/plugins/vue-editor.html b/nodes/plugins/vue-editor.html
new file mode 100644
index 000000000..7f3213f3d
--- /dev/null
+++ b/nodes/plugins/vue-editor.html
@@ -0,0 +1,79 @@
+<script type="text/javascript">
+    /**
+     * Registers a "vue-sfc" language with Node-RED's Monaco code editor, used by ui-template.
+     * Up front this only registers the language id and Monaco's HTML language service for it. The tokenizer,
+     * Vue/Vuetify providers and Vuetify data are loaded from resources/vue-editor the first time an editor uses it.
+     */
+    (function () {
+        const PLUGIN_ID = 'ui-template-vue-editor'
+        const LANGUAGE_ID = 'vue-sfc'
+        const MODULE = '@flowfuse/node-red-dashboard'
+
+        /**
+         * Monaco asks MonacoEnvironment.getWorkerUrl/getWorker for a language worker using the language id as the
+         * label. Node-RED only knows its built-in labels, so map ours onto the html worker that serves it.
+         * Done on first use, when Node-RED has already set up MonacoEnvironment.
+         */
+        function shimWorkerLabel () {
+            const env = window.MonacoEnvironment
+            if (!env || env.vueSfcWorkerShim) {
+                return
+            }
+            for (const fn of ['getWorkerUrl', 'getWorker']) {
+                if (typeof env[fn] === 'function') {
+                    const original = env[fn]
+                    env[fn] = function (moduleId, label) {
+                        return original.call(this, moduleId, label === LANGUAGE_ID ? 'html' : label)
+                    }
+                }
+            }
+            env.vueSfcWorkerShim = true
+        }
+
+        function registerHtmlLanguageService (monaco) {
+            // Monaco 0.55 moved monaco.languages.html to monaco.html
+            const html = monaco.html?.registerHTMLLanguageService ? monaco.html : monaco.languages.html
+            if (!html?.registerHTMLLanguageService) {
+                return
+            }
+            const options = Object.assign({}, html.htmlDefaults?.options, { data: { useDefaultDataProvider: true } })
+            html.registerHTMLLanguageService(LANGUAGE_ID, options)
+        }
+
+        /**
+         * Registers the language if Monaco is loaded. Safe to call more than once.
+         * @returns {boolean} true when the vue-sfc language is available
+         */
+        function ensure () {
+            const monaco = window.monaco
+            if (!monaco?.languages?.register) {
+                return false
+            }
+            if (monaco.languages.getLanguages().some(l => l.id === LANGUAGE_ID)) {
+                return true
+            }
+            monaco.languages.register({ id: LANGUAGE_ID, aliases: ['Vue', LANGUAGE_ID], extensions: ['.vue'] })
+            try {
+                registerHtmlLanguageService(monaco)
+            } catch (err) {
+                console.warn('Dashboard: HTML language service not available for Vue templates', err)
+            }
+
+            const version = RED.nodes.registry?.getModule?.(MODULE)?.version
+            const query = version ? '?v=' + encodeURIComponent(version) : ''
+            const base = new URL('resources/' + MODULE + '/vue-editor/', document.baseURI)
+            monaco.languages.onLanguage(LANGUAGE_ID, function () {
+                shimWorkerLabel()
+                import(new URL('vue-sfc.mjs' + query, base).href)
+                    .then(m => m.activate(monaco, { dataUrl: new URL('vuetify.json' + query, base).href }))
+                    .catch(err => console.warn('Dashboard: could not load the Vue editor support', err))
+            })
+            return true
+        }
+
+        RED.plugins.registerPlugin(PLUGIN_ID, {
+            onadd: ensure,
+            ensure
+        })
+    })()
+</script>
diff --git a/nodes/widgets/ui_template.html b/nodes/widgets/ui_template.html
index ee3f5f726..834506e7e 100644
--- a/nodes/widgets/ui_template.html
+++ b/nodes/widgets/ui_template.html
@@ -183,6 +183,11 @@
                 const that = this
                 const $templateScope = $('#node-input-templateScope')
 
+                // Monaco gets Vue/Vuetify syntax and completions from the ui-template-vue-editor plugin (nodes/plugins/vue-editor.html).
+                // ACE, or Monaco without the plugin, keeps the HTML mode.
+                const vueEditor = RED.plugins.getPlugin('ui-template-vue-editor')
+                const htmlMode = RED.editor.codeEditor?.editor?.type === 'monaco' && vueEditor?.ensure?.() ? 'ace/mode/vue-sfc' : 'ace/mode/html'
+
                 // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                 // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
                 if (RED.nodes.subflow(this.z)) {
@@ -239,15 +244,15 @@
                         break
                     case 'widget:ui':
                         $('#template-row-ui').show()
-                        that.editor.getSession().setMode('ace/mode/html')
+                        that.editor.getSession().setMode(htmlMode)
                         break
                     case 'widget:page':
                         $('#template-row-page').show()
-                        that.editor.getSession().setMode('ace/mode/html')
+                        that.editor.getSession().setMode(htmlMode)
                         break
                     default:
                         $('#template-row-group, #template-row-class').show()
-                        that.editor.getSession().setMode('ace/mode/html')
+                        that.editor.getSession().setMode(htmlMode)
                         break
                     }
                     resize.call(that)
@@ -255,7 +260,7 @@
 
                 this.editor = RED.editor.createEditor({
                     id: 'node-input-format-editor',
-                    mode: 'ace/mode/html',
+                    mode: htmlMode,
                     value: $('#node-input-format').val()
                 })
 
@@ -263,7 +268,7 @@
                     url: 'uitemplates', // where to get the data from
                     type: 'ui-template', // the type of object the library is for
                     editor: this.editor, // the field name the main text body goes to
-                    mode: 'ace/mode/html',
+                    mode: htmlMode,
                     fields: ['name']
                 })
 
@@ -275,7 +280,7 @@
                     e.preventDefault()
                     const value = that.editor.getValue()
                     RED.editor.editText({
-                        mode: $templateScope.val() === 'global' ? 'css' : 'html',
+                        mode: $templateScope.val() === 'global' ? 'css' : htmlMode.replace('ace/mode/', ''),
                         value,
                         width: 'Infinity',
                         cursor: that.editor.getCursorPosition(),
diff --git a/package.json b/package.json
index 025c4e6b1..c761baabc 100644
--- a/package.json
+++ b/package.json
@@ -31,15 +31,17 @@
     ],
     "files": [
         "dist/*",
-        "nodes/*"
+        "nodes/*",
+        "resources/*"
     ],
     "scripts": {
-        "build": "vite build",
-        "build:dev": "cross-env NODE_ENV=development vite build --mode development",
+        "build": "npm run build:vue-editor && vite build",
+        "build:dev": "npm run build:vue-editor && cross-env NODE_ENV=development vite build --mode development",
+        "build:vue-editor": "node scripts/build-vue-editor-data.js",
         "cy:open": "cypress open",
         "cy:run": "cypress run",
         "cy:server": "node-red -u ./cypress/fixtures/user-dir/ -p 1881",
-        "dev": "cross-env NODE_ENV=development vite build --mode development --watch",
+        "dev": "npm run build:vue-editor && cross-env NODE_ENV=development vite build --mode development --watch",
         "dev:prod": "vite build --watch",
         "docs:build": "vitepress build docs",
         "docs:dev": "vitepress dev docs",
@@ -157,6 +159,9 @@
             "ui-event": "nodes/widgets/ui_event.js",
             "ui-control": "nodes/widgets/ui_control.js",
             "ui-progress": "nodes/widgets/ui_progress.js"
+        },
+        "plugins": {
+            "ui-template-vue-editor": "nodes/plugins/vue-editor.html"
         }
     },
     "overrides": {
diff --git a/resources/vue-editor/vue-sfc.mjs b/resources/vue-editor/vue-sfc.mjs
new file mode 100644
index 000000000..d5bbb5882
--- /dev/null
+++ b/resources/vue-editor/vue-sfc.mjs
@@ -0,0 +1,608 @@
+/* eslint-env browser */
+/**
+ * Vue single file component support for Node-RED's Monaco code editor, used by the ui-template node.
+ *
+ * Loaded on demand by nodes/plugins/vue-editor.html the first time an editor uses the `vue-sfc` language.
+ * It provides:
+ *  - a Monarch tokenizer for Vue templates (directives, bindings, events, slots and {{ }} interpolation
+ *    are tokenized with JavaScript embedded; <script> and <style> blocks embed JavaScript/TypeScript and CSS/SCSS/Less)
+ *  - Vue and Vuetify completion and hover for tags, props, events, slots and directives, using Vuetify's
+ *    web-types data for the Vuetify version bundled with the Dashboard (see scripts/build-vue-editor-data.js)
+ *
+ * The HTML language service (completion, hover, formatting, folding from Monaco's html worker) is registered by
+ * the plugin itself, because it has to be in place before the language is first used.
+ * Only public Monaco APIs are used, so no change to Node-RED's vendored Monaco is needed.
+ */
+
+export const LANGUAGE_ID = 'vue-sfc'
+
+const VUETIFY_API_URL = 'https://vuetifyjs.com/api/'
+const VUE_API_URL = 'https://vuejs.org/api/'
+
+const VOID_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr']
+
+const VUE_DIRECTIVES = [
+    ['v-if', true, 'Conditionally render the element based on the truthy-ness of the expression value.', 'built-in-directives.html#v-if'],
+    ['v-else-if', true, 'Denote the "else if block" for `v-if`. Can be chained.', 'built-in-directives.html#v-else-if'],
+    ['v-else', false, 'Denote the "else block" for `v-if` or a `v-if` / `v-else-if` chain.', 'built-in-directives.html#v-else'],
+    ['v-for', true, 'Render the element or template block multiple times based on the source data, e.g. `item in items`.', 'built-in-directives.html#v-for'],
+    ['v-show', true, 'Toggle the element\'s visibility based on the truthy-ness of the expression value.', 'built-in-directives.html#v-show'],
+    ['v-model', true, 'Create a two-way binding on a form input element or a component.', 'built-in-directives.html#v-model'],
+    ['v-bind', true, 'Dynamically bind one or more attributes, or a component prop, to an expression. Shorthand `:`.', 'built-in-directives.html#v-bind'],
+    ['v-on', true, 'Attach an event listener to the element. Shorthand `@`.', 'built-in-directives.html#v-on'],
+    ['v-slot', true, 'Denote named slots or scoped slots that expect to receive props. Shorthand `#`.', 'built-in-directives.html#v-slot'],
+    ['v-text', true, 'Update the element\'s text content.', 'built-in-directives.html#v-text'],
+    ['v-html', true, 'Update the element\'s innerHTML. Contents are inserted as plain HTML and are not compiled as Vue templates.', 'built-in-directives.html#v-html'],
+    ['v-pre', false, 'Skip compilation for this element and all its children.', 'built-in-directives.html#v-pre'],
+    ['v-once', false, 'Render the element and component once only, and skip future updates.', 'built-in-directives.html#v-once'],
+    ['v-memo', true, 'Memoize a sub-tree of the template, re-rendered only when the dependency array changes.', 'built-in-directives.html#v-memo'],
+    ['v-cloak', false, 'Hide un-compiled template until it is ready.', 'built-in-directives.html#v-cloak']
+]
+
+const VUE_SPECIAL_ATTRIBUTES = [
+    ['key', 'A hint for Vue\'s virtual DOM algorithm to identify vnodes, mostly used with `v-for`.', 'built-in-special-attributes.html#key'],
+    ['ref', 'Register a reference to an element or a child component.', 'built-in-special-attributes.html#ref'],
+    ['is', 'Bind dynamic components.', 'built-in-special-attributes.html#is']
+]
+
+const VUE_COMPONENTS = [
+    ['template', 'Wraps a fragment, e.g. for `v-if`, `v-for` or a named slot (`<template #name>`).', 'built-in-special-elements.html#template'],
+    ['component', 'A "meta component" for rendering dynamic components or elements. Use with `:is`.', 'built-in-special-elements.html#component'],
+    ['slot', 'Denotes slot content outlets in templates.', 'built-in-special-elements.html#slot'],
+    ['transition', 'Provides animated transition effects to a single element or component.', 'built-in-components.html#transition'],
+    ['transition-group', 'Provides transition effects for multiple elements or components in a list.', 'built-in-components.html#transitiongroup'],
+    ['keep-alive', 'Caches dynamically toggled components wrapped inside.', 'built-in-components.html#keepalive'],
+    ['teleport', 'Renders its slot content to another part of the DOM.', 'built-in-components.html#teleport']
+]
+
+const DOM_EVENTS = ['click', 'dblclick', 'input', 'change', 'submit', 'focus', 'blur', 'keydown', 'keyup', 'mouseenter', 'mouseleave', 'contextmenu']
+
+/* Language configuration and tokenizer are adapted from Monaco's HTML language
+ * (monaco-editor esm/vs/languages/definitions/html/html.js, Copyright (c) Microsoft Corporation, MIT License) */
+export function getLanguageConfiguration (monaco) {
+    return {
+        wordPattern: /(-?\d*\.\d\w*)|([^`~!@$^&*()=+[{\]}\\|;:'",.<>/\s]+)/g,
+        comments: { blockComment: ['<!--', '-->'] },
+        brackets: [['<!--', '-->'], ['<', '>'], ['{', '}'], ['(', ')']],
+        autoClosingPairs: [
+            { open: '{', close: '}' },
+            { open: '[', close: ']' },
+            { open: '(', close: ')' },
+            { open: '"', close: '"' },
+            { open: '\'', close: '\'' }
+        ],
+        surroundingPairs: [
+            { open: '"', close: '"' },
+            { open: '\'', close: '\'' },
+            { open: '{', close: '}' },
+            { open: '[', close: ']' },
+            { open: '(', close: ')' },
+            { open: '<', close: '>' }
+        ],
+        onEnterRules: [
+            {
+                beforeText: new RegExp(`<(?!(?:${VOID_ELEMENTS.join('|')}))([_:\\w][_:\\w-.\\d]*)([^/>]*(?!/)>)[^<]*$`, 'i'),
+                afterText: /^<\/([_:\w][_:\w-.\d]*)\s*>$/i,
+                action: { indentAction: monaco.languages.IndentAction.IndentOutdent }
+            },
+            {
+                beforeText: new RegExp(`<(?!(?:${VOID_ELEMENTS.join('|')}))(\\w[\\w\\d-]*)([^/>]*(?!/)>)[^<]*$`, 'i'),
+                action: { indentAction: monaco.languages.IndentAction.Indent }
+            }
+        ],
+        folding: {
+            markers: {
+                start: /^\s*<!--\s*#region\b.*-->/,
+                end: /^\s*<!--\s*#endregion\b.*-->/
+            }
+        }
+    }
+}
+
+// attribute names that hold a JavaScript expression: v-*, :prop, @event, #slot
+const DIRECTIVE_NAME = /(?:v-[\w-]+(?::[\w\-.:[\]]*|\.[\w\-.]*)?|[:@#][\w\-.:[\]]*)/
+
+export const language = {
+    defaultToken: '',
+    tokenPostfix: '.html',
+    ignoreCase: true,
+    tokenizer: {
+        root: [
+            [/<!DOCTYPE/, 'metatag', '@doctype'],
+            [/<!--/, 'comment', '@comment'],
+            [/(<)((?:[\w-]+:)?[\w-]+)(\s*)(\/>)/, ['delimiter', 'tag', '', 'delimiter']],
+            [/(<)(script)/, ['delimiter', { token: 'tag', next: '@script' }]],
+            [/(<)(style)/, ['delimiter', { token: 'tag', next: '@style' }]],
+            [/(<)((?:[\w-]+:)?[\w-]+)/, ['delimiter', { token: 'tag', next: '@otherTag' }]],
+            [/(<\/)((?:[\w-]+:)?[\w-]+)/, ['delimiter', { token: 'tag', next: '@otherTag' }]],
+            [/</, 'delimiter'],
+            [/\{\{/, { token: 'delimiter.bracket', next: '@interpolation', nextEmbedded: 'text/javascript' }],
+            [/[^<{]+/], // text
+            [/\{/]
+        ],
+        interpolation: [
+            [/\}\}/, { token: 'delimiter.bracket', next: '@pop', nextEmbedded: '@pop' }]
+        ],
+        doctype: [
+            [/[^>]+/, 'metatag.content'],
+            [/>/, 'metatag', '@pop']
+        ],
+        comment: [
+            [/-->/, 'comment', '@pop'],
+            [/[^-]+/, 'comment.content'],
+            [/./, 'comment.content']
+        ],
+        otherTag: [
+            [/\/?>/, 'delimiter', '@pop'],
+            [/"([^"]*)"/, 'attribute.value'],
+            [/'([^']*)'/, 'attribute.value'],
+            [DIRECTIVE_NAME, { token: 'attribute.name', next: '@directive' }],
+            [/[\w-]+/, 'attribute.name'],
+            [/=/, 'delimiter'],
+            [/[ \t\r\n]+/] // whitespace
+        ],
+        // after a directive name: an optional ="expression" that is tokenized as JavaScript
+        directive: [
+            [/[ \t]*=[ \t]*/, 'delimiter'],
+            [/"/, { token: 'attribute.value', next: '@expressionDoubleQuoted', nextEmbedded: 'text/javascript' }],
+            [/'/, { token: 'attribute.value', next: '@expressionSingleQuoted', nextEmbedded: 'text/javascript' }],
+            [/./, { token: '@rematch', next: '@pop' }]
+        ],
+        // the closing quote pops back to the directive state, which then pops back to the tag
+        expressionDoubleQuoted: [
+            [/"/, { token: 'attribute.value', next: '@pop', nextEmbedded: '@pop' }]
+        ],
+        expressionSingleQuoted: [
+            [/'/, { token: 'attribute.value', next: '@pop', nextEmbedded: '@pop' }]
+        ],
+
+        // <script> blocks: JavaScript, or TypeScript with lang="ts"
+        script: [
+            [/(lang)(\s*=\s*)(["'])(ts|typescript)(["'])/, ['attribute.name', 'delimiter', 'attribute.value', 'attribute.value', { token: 'attribute.value', switchTo: '@scriptWithLanguage.typescript' }]],
+            [/"([^"]*)"/, 'attribute.value'],
+            [/'([^']*)'/, 'attribute.value'],
+            [/[\w-]+/, 'attribute.name'],
+            [/=/, 'delimiter'],
+            [/>/, { token: 'delimiter', next: '@scriptEmbedded', nextEmbedded: 'text/javascript' }],
+            [/[ \t\r\n]+/], // whitespace
+            [/(<\/)(script\s*)(>)/, ['delimiter', 'tag', { token: 'delimiter', next: '@pop' }]]
+        ],
+        scriptWithLanguage: [
+            [/>/, { token: 'delimiter', next: '@scriptEmbedded.$S2', nextEmbedded: '$S2' }],
+            [/"([^"]*)"/, 'attribute.value'],
+            [/'([^']*)'/, 'attribute.value'],
+            [/[\w-]+/, 'attribute.name'],
+            [/=/, 'delimiter'],
+            [/[ \t\r\n]+/], // whitespace
+            [/<\/script\s*>/, { token: '@rematch', next: '@pop' }]
+        ],
+        scriptEmbedded: [
+            [/<\/script/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+            [/[^<]+/, '']
+        ],
+
+        // <style> blocks: CSS, or SCSS / Less with lang="scss" / lang="less"
+        style: [
+            [/(lang)(\s*=\s*)(["'])(scss|less)(["'])/, ['attribute.name', 'delimiter', 'attribute.value', 'attribute.value', { token: 'attribute.value', switchTo: '@styleWithLanguage.$4' }]],
+            [/"([^"]*)"/, 'attribute.value'],
+            [/'([^']*)'/, 'attribute.value'],
+            [/[\w-]+/, 'attribute.name'],
+            [/=/, 'delimiter'],
+            [/>/, { token: 'delimiter', next: '@styleEmbedded', nextEmbedded: 'text/css' }],
+            [/[ \t\r\n]+/], // whitespace
+            [/(<\/)(style\s*)(>)/, ['delimiter', 'tag', { token: 'delimiter', next: '@pop' }]]
+        ],
+        styleWithLanguage: [
+            [/>/, { token: 'delimiter', next: '@styleEmbedded.$S2', nextEmbedded: '$S2' }],
+            [/"([^"]*)"/, 'attribute.value'],
+            [/'([^']*)'/, 'attribute.value'],
+            [/[\w-]+/, 'attribute.name'],
+            [/=/, 'delimiter'],
+            [/[ \t\r\n]+/], // whitespace
+            [/<\/style\s*>/, { token: '@rematch', next: '@pop' }]
+        ],
+        styleEmbedded: [
+            [/<\/style/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+            [/[^<]+/, '']
+        ]
+    }
+}
+
+/**
+ * Works out what the cursor is on: a tag name, an attribute name or an attribute value.
+ * Returns null when the cursor is in text content, a comment, an interpolation or a script/style block.
+ * @param {string} text - the document text up to the cursor
+ */
+export function getCursorContext (text) {
+    const lastIndexOf = (re) => {
+        let index = -1
+        for (const m of text.matchAll(re)) { index = m.index }
+        return index
+    }
+    // inside a <script> or <style> block?
+    if (lastIndexOf(/<(script|style)\b/gi) > lastIndexOf(/<\/(script|style)\s*>/gi)) {
+        return null
+    }
+    // inside a comment or a {{ }} interpolation?
+    if (text.lastIndexOf('<!--') > text.lastIndexOf('-->') || text.lastIndexOf('{{') > text.lastIndexOf('}}')) {
+        return null
+    }
+    const tagStart = text.lastIndexOf('<')
+    if (tagStart === -1) {
+        return null
+    }
+    const inTag = text.slice(tagStart + 1)
+    if (/^[\w-]*$/.test(inTag)) {
+        return { kind: 'tagName', prefix: inTag, offset: tagStart + 1 }
+    }
+    const tagMatch = /^([\w-]+)/.exec(inTag)
+    if (!tagMatch) {
+        return null // closing tag, comment or doctype
+    }
+    const tag = tagMatch[1]
+    const s = inTag.slice(tag.length)
+    const base = tagStart + 1 + tag.length
+    let i = 0
+    while (i < s.length) {
+        const ch = s[i]
+        if (ch === '>') {
+            return null // the tag is closed, the cursor is in content
+        }
+        if (/\s/.test(ch) || ch === '/') {
+            i++
+            continue
+        }
+        const name = /^[^\s"'=<>/]+/.exec(s.slice(i))
+        if (!name) {
+            i++
+            continue
+        }
+        const nameStart = i
+        i += name[0].length
+        if (i >= s.length) {
+            return { kind: 'attributeName', tag, prefix: name[0], offset: base + nameStart, textBeforeTag: text.slice(0, tagStart) }
+        }
+        let j = i
+        while (j < s.length && /\s/.test(s[j])) { j++ }
+        if (s[j] !== '=') {
+            i = j
+            continue
+        }
+        j++
+        while (j < s.length && /\s/.test(s[j])) { j++ }
+        if (j >= s.length) {
+            return null // after "name=", waiting for a quote
+        }
+        const quote = s[j]
+        if (quote === '"' || quote === '\'') {
+            const end = s.indexOf(quote, j + 1)
+            if (end === -1) {
+                return { kind: 'attributeValue', tag, attribute: name[0], prefix: s.slice(j + 1), offset: base + j + 1 }
+            }
+            i = end + 1
+        } else {
+            i = j + /^[^\s>]*/.exec(s.slice(j))[0].length
+        }
+    }
+    return { kind: 'attributeName', tag, prefix: '', offset: base + s.length, textBeforeTag: text.slice(0, tagStart) }
+}
+
+/**
+ * Finds the element that encloses a position, i.e. the parent of a tag that starts there.
+ * @param {string} text - the document text before the tag
+ */
+export function getParentTag (text) {
+    const stack = []
+    for (const m of text.matchAll(/<(\/?)([\w-]+)(?:"[^"]*"|'[^']*'|[^'">])*?(\/?)>/g)) {
+        const [, closing, name, selfClosing] = m
+        const tag = name.toLowerCase()
+        if (selfClosing || VOID_ELEMENTS.includes(tag) || tag === 'script' || tag === 'style') {
+            continue
+        }
+        if (closing) {
+            const index = stack.lastIndexOf(tag)
+            if (index !== -1) { stack.length = index }
+        } else {
+            stack.push(tag)
+        }
+    }
+    return stack[stack.length - 1] || null
+}
+
+/** Converts a PascalCase or camelCase name to kebab-case (VCardActions -> v-card-actions, itemsPerPage -> items-per-page) */
+export function kebab (name) {
+    return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').replace(/([A-Z])([A-Z][a-z])/g, '$1-$2').toLowerCase()
+}
+
+/** Splits an attribute name into its Vue prefix and the name it refers to, e.g. ":items" -> { prefix: ":", name: "items" } */
+export function splitAttributeName (attribute) {
+    const m = /^(v-bind:|v-on:|v-slot:|:|@|#)?(.*)$/.exec(attribute)
+    const prefix = m[1] || ''
+    const name = m[2].split('.')[0] // drop modifiers
+    const kind = { '': 'attribute', 'v-bind:': 'prop', ':': 'prop', 'v-on:': 'event', '@': 'event', 'v-slot:': 'slot', '#': 'slot' }[prefix]
+    return { prefix, name, kind }
+}
+
+/** Extracts the string literal values from a prop type such as "'start' | 'end' | boolean" */
+export function literalValues (type) {
+    return [...(type || '').matchAll(/'([^']*)'/g)].map(m => m[1])
+}
+
+/**
+ * Wraps the Vuetify data generated at build time with lookups by tag name.
+ * @param {object} data - contents of vuetify.json
+ */
+export function createCatalog (data) {
+    const text = (index) => (index >= 0 ? data.strings[index] : '')
+    const tags = new Map()
+    for (const [name, tag] of Object.entries(data?.tags || {})) {
+        tags.set(name, {
+            name,
+            props: tag.p.map(([prop, type, description, defaultValue]) => ({ name: prop, type, description: text(description), default: defaultValue })),
+            events: tag.e.map(([event, args, description]) => ({ name: event, args, description: text(description) })),
+            slots: tag.s.map(([slot, description]) => ({ name: slot, description: text(description) }))
+        })
+    }
+    const directives = (data?.directives || []).map(([name, type, description, modifiers]) => ({ name, type, description: text(description), modifiers }))
+    return {
+        version: data?.vuetify,
+        tags,
+        directives,
+        getTag (name) {
+            return tags.get(kebab(name || ''))
+        }
+    }
+}
+
+function markdown (value) {
+    return { value, isTrusted: false }
+}
+
+function vuetifyLink (tag, section) {
+    return `[Vuetify API reference](${VUETIFY_API_URL}${tag}${section ? '#' + section : ''})`
+}
+
+function propDocs (tag, prop) {
+    const lines = []
+    if (prop.type) { lines.push('```ts\n' + prop.type + '\n```') }
+    if (prop.description) { lines.push(prop.description) }
+    if (prop.default !== '' && prop.default !== undefined) { lines.push(`Default: \`${prop.default}\``) }
+    lines.push(vuetifyLink(tag.name, 'props'))
+    return lines.join('\n\n')
+}
+
+function eventDocs (tag, event) {
+    const lines = []
+    if (event.args) { lines.push('```ts\n(' + event.args + ') => void\n```') }
+    if (event.description) { lines.push(event.description) }
+    lines.push(vuetifyLink(tag.name, 'events'))
+    return lines.join('\n\n')
+}
+
+function slotDocs (tag, slot) {
+    return [slot.description, vuetifyLink(tag.name, 'slots')].filter(Boolean).join('\n\n')
+}
+
+function directiveDocs (directive) {
+    if (directive.link) {
+        return `${directive.description}\n\n[Vue API reference](${VUE_API_URL}${directive.link})`
+    }
+    const lines = []
+    if (directive.type) { lines.push('```ts\n' + directive.type + '\n```') }
+    if (directive.description) { lines.push(directive.description) }
+    lines.push(vuetifyLink(directive.name + '-directive'))
+    return lines.join('\n\n')
+}
+
+/**
+ * Builds the completion items for a cursor context.
+ * @param {object} monaco - the monaco namespace
+ * @param {object} catalog - from createCatalog()
+ * @param {object} context - from getCursorContext()
+ * @param {object} range - the range the completion replaces
+ */
+export function getCompletions (monaco, catalog, context, range) {
+    const { CompletionItemKind, CompletionItemInsertTextRule } = monaco.languages
+    const snippet = CompletionItemInsertTextRule.InsertAsSnippet
+    const items = []
+
+    if (context.kind === 'tagName') {
+        const pascal = /^[A-Z]/.test(context.prefix)
+        for (const tag of catalog.tags.values()) {
+            const label = pascal ? tag.name.replace(/(?:^|-)(\w)/g, (_, c) => c.toUpperCase()) : tag.name
+            items.push({ label, kind: CompletionItemKind.Class, detail: `Vuetify ${catalog.version || ''}`.trim(), documentation: markdown(vuetifyLink(tag.name)), insertText: label, range, sortText: '1' + label })
+        }
+        for (const [name, description, link] of VUE_COMPONENTS) {
+            items.push({ label: name, kind: CompletionItemKind.Module, detail: 'Vue', documentation: markdown(`${description}\n\n[Vue API reference](${VUE_API_URL}${link})`), insertText: name, range, sortText: '2' + name })
+        }
+        return items
+    }
+
+    if (context.kind === 'attributeValue') {
+        const tag = catalog.getTag(context.tag)
+        const attribute = splitAttributeName(context.attribute)
+        if (!tag || attribute.kind !== 'attribute') {
+            return items
+        }
+        const prop = tag.props.find(p => p.name === kebab(attribute.name))
+        for (const value of literalValues(prop?.type)) {
+            items.push({ label: value, kind: CompletionItemKind.EnumMember, detail: `${tag.name} ${prop.name}`, documentation: markdown(propDocs(tag, prop)), insertText: value, range })
+        }
+        return items
+    }
+
+    // attribute names
+    const tag = catalog.getTag(context.tag)
+    const { prefix, kind } = splitAttributeName(context.prefix)
+    const add = (item) => items.push(Object.assign({ range }, item))
+
+    if (kind === 'prop' || kind === 'attribute') {
+        for (const prop of tag?.props || []) {
+            const isBoolean = /^boolean$/.test(prop.type)
+            const label = prefix + prop.name
+            add({
+                label,
+                kind: CompletionItemKind.Property,
+                detail: prop.type,
+                documentation: markdown(propDocs(tag, prop)),
+                insertText: (kind === 'attribute' && isBoolean) ? label : `${label}="$1"`,
+                insertTextRules: snippet,
+                sortText: '0' + prop.name
+            })
+        }
+    }
+    if (kind === 'event' || (kind === 'attribute' && !context.prefix.startsWith('v-'))) {
+        const eventPrefix = kind === 'event' ? prefix : '@'
+        const events = (tag?.events || []).map(e => ({ ...e, tag }))
+        for (const name of DOM_EVENTS) {
+            if (!events.some(e => e.name === name)) { events.push({ name, description: `DOM \`${name}\` event`, dom: true }) }
+        }
+        for (const event of events) {
+            const label = eventPrefix + event.name
+            add({
+                label,
+                kind: CompletionItemKind.Event,
+                detail: event.dom ? 'DOM event' : `${tag.name} event`,
+                documentation: markdown(event.dom ? event.description : eventDocs(tag, event)),
+                insertText: `${label}="$1"`,
+                insertTextRules: snippet,
+                sortText: (event.dom ? '3' : '1') + event.name
+            })
+        }
+    }
+    if (kind === 'slot' || (kind === 'attribute' && context.tag.toLowerCase() === 'template')) {
+        // slots belong to the component the <template> is in, or to the component itself (v-slot on a component)
+        const slotPrefix = kind === 'slot' ? prefix : '#'
+        const owner = context.tag.toLowerCase() === 'template' ? catalog.getTag(getParentTag(context.textBeforeTag || '')) : tag
+        for (const slot of owner?.slots || []) {
+            const label = slotPrefix + slot.name
+            add({ label, kind: CompletionItemKind.Field, detail: `${owner.name} slot`, documentation: markdown(slotDocs(owner, slot)), insertText: label, sortText: '0' + slot.name })
+        }
+    }
+    if (kind === 'attribute') {
+        for (const [name, hasValue, description, link] of VUE_DIRECTIVES) {
+            add({ label: name, kind: CompletionItemKind.Keyword, detail: 'Vue directive', documentation: markdown(directiveDocs({ name, description, link })), insertText: hasValue ? `${name}="$1"` : name, insertTextRules: snippet, sortText: '2' + name })
+        }
+        for (const directive of catalog.directives) {
+            add({ label: directive.name, kind: CompletionItemKind.Keyword, detail: 'Vuetify directive', documentation: markdown(directiveDocs(directive)), insertText: `${directive.name}="$1"`, insertTextRules: snippet, sortText: '2' + directive.name })
+        }
+        for (const [name, description, link] of VUE_SPECIAL_ATTRIBUTES) {
+            add({ label: name, kind: CompletionItemKind.Keyword, detail: 'Vue', documentation: markdown(directiveDocs({ name, description, link })), insertText: `${name}="$1"`, insertTextRules: snippet, sortText: '2' + name })
+        }
+    }
+    return items
+}
+
+/**
+ * Builds the hover contents for an attribute or tag name.
+ * @param {object} catalog - from createCatalog()
+ * @param {string} word - the tag or attribute name under the cursor
+ * @param {object} context - getCursorContext() at the start of the word
+ */
+export function getHover (catalog, word, context) {
+    if (!context) {
+        return null
+    }
+    if (context.kind === 'tagName') {
+        const tag = catalog.getTag(word)
+        if (tag) {
+            return `**${tag.name}** (Vuetify ${catalog.version || ''})\n\n${vuetifyLink(tag.name)}`
+        }
+        const vue = VUE_COMPONENTS.find(c => c[0] === word.toLowerCase())
+        return vue ? `**${vue[0]}** (Vue)\n\n${vue[1]}\n\n[Vue API reference](${VUE_API_URL}${vue[2]})` : null
+    }
+    if (context.kind !== 'attributeName') {
+        return null
+    }
+    const tag = catalog.getTag(context.tag)
+    const { name, kind } = splitAttributeName(word)
+    if (kind === 'prop' || kind === 'attribute') {
+        const prop = tag?.props.find(p => p.name === kebab(name))
+        if (prop) {
+            return `**${prop.name}** (${tag.name} prop)\n\n${propDocs(tag, prop)}`
+        }
+    }
+    if (kind === 'event') {
+        const event = tag?.events.find(e => e.name === kebab(name))
+        if (event) {
+            return `**${event.name}** (${tag.name} event)\n\n${eventDocs(tag, event)}`
+        }
+    }
+    if (kind === 'slot') {
+        const owner = context.tag.toLowerCase() === 'template' ? catalog.getTag(getParentTag(context.textBeforeTag || '')) : tag
+        const slot = owner?.slots.find(s => s.name === name)
+        if (slot) {
+            return `**${slot.name}** (${owner.name} slot)\n\n${slotDocs(owner, slot)}`
+        }
+    }
+    if (kind === 'attribute') {
+        const vue = VUE_DIRECTIVES.find(d => d[0] === name) || VUE_SPECIAL_ATTRIBUTES.find(d => d[0] === name)
+        if (vue) {
+            return `**${vue[0]}** (Vue)\n\n${directiveDocs({ name: vue[0], description: vue.length === 4 ? vue[2] : vue[1], link: vue[vue.length - 1] })}`
+        }
+        const directive = catalog.directives.find(d => d.name === name)
+        if (directive) {
+            return `**${directive.name}** (Vuetify directive)\n\n${directiveDocs(directive)}`
+        }
+    }
+    return null
+}
+
+/**
+ * Registers the tokenizer and the Vue/Vuetify completion and hover providers.
+ * @param {object} monaco - the monaco namespace
+ * @param {object} options
+ * @param {string} options.dataUrl - URL of the generated vuetify.json
+ */
+export function activate (monaco, { dataUrl }) {
+    monaco.languages.setLanguageConfiguration(LANGUAGE_ID, getLanguageConfiguration(monaco))
+    monaco.languages.setMonarchTokensProvider(LANGUAGE_ID, language)
+
+    let catalog = createCatalog(null)
+    const ready = fetch(dataUrl)
+        .then(res => (res.ok ? res.json() : Promise.reject(new Error(`${res.status} ${res.statusText}`))))
+        .then(data => {
+            catalog = createCatalog(data)
+            return catalog
+        })
+        .catch(err => console.warn('vue-sfc: could not load Vuetify data from ' + dataUrl, err))
+
+    const textBefore = (model, position) => model.getValueInRange({ startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column })
+
+    monaco.languages.registerCompletionItemProvider(LANGUAGE_ID, {
+        triggerCharacters: ['<', ':', '@', '#', '"', '\''],
+        async provideCompletionItems (model, position) {
+            await ready
+            const context = getCursorContext(textBefore(model, position))
+            if (!context) {
+                return { suggestions: [] }
+            }
+            const start = model.getPositionAt(context.offset)
+            const range = new monaco.Range(start.lineNumber, start.column, position.lineNumber, position.column)
+            return { suggestions: getCompletions(monaco, catalog, context, range) }
+        }
+    })
+
+    monaco.languages.registerHoverProvider(LANGUAGE_ID, {
+        async provideHover (model, position) {
+            await ready
+            const line = model.getLineContent(position.lineNumber)
+            const match = [...line.matchAll(/[\w\-:@#.[\]]+/g)].find(m => m.index < position.column && m.index + m[0].length >= position.column - 1)
+            if (!match) {
+                return null
+            }
+            const wordStart = { lineNumber: position.lineNumber, column: match.index + 1 }
+            const context = getCursorContext(textBefore(model, wordStart))
+            const contents = getHover(catalog, match[0], context)
+            if (!contents) {
+                return null
+            }
+            return {
+                range: new monaco.Range(position.lineNumber, match.index + 1, position.lineNumber, match.index + 1 + match[0].length),
+                contents: [markdown(contents)]
+            }
+        }
+    })
+
+    return { ready }
+}
diff --git a/scripts/build-vue-editor-data.js b/scripts/build-vue-editor-data.js
new file mode 100644
index 000000000..93dde4c81
--- /dev/null
+++ b/scripts/build-vue-editor-data.js
@@ -0,0 +1,62 @@
+/**
+ * Builds the Vuetify component data used by the ui-template code editor (resources/vue-editor).
+ *
+ * Source: the web-types file that Vuetify publishes in its npm package, so the editor always describes
+ * the same Vuetify version that the Dashboard bundles. Output is a compact JSON file with descriptions
+ * de-duplicated into a string table (many props share the same description).
+ */
+const fs = require('fs')
+const path = require('path')
+
+const webTypes = require('vuetify/dist/json/web-types.json')
+const vuetifyPackage = require('vuetify/package.json')
+
+const OUTPUT = path.join(__dirname, '..', 'resources', 'vue-editor', 'vuetify.json')
+
+// VCardActions -> v-card-actions, itemsPerPage -> items-per-page, update:modelValue -> update:model-value
+const kebab = (name) => name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').replace(/([A-Z])([A-Z][a-z])/g, '$1-$2').toLowerCase()
+const cleanType = (type) => (type || '').trim()
+
+const strings = []
+const stringIndex = new Map()
+function str (text) {
+    text = (text || '').trim()
+    if (!text) {
+        return -1
+    }
+    if (!stringIndex.has(text)) {
+        stringIndex.set(text, strings.length)
+        strings.push(text)
+    }
+    return stringIndex.get(text)
+}
+
+const tags = {}
+for (const tag of webTypes.contributions.html.tags) {
+    const props = tag.attributes.map(a => [kebab(a.name), cleanType(a.value?.type), str(a.description), a.default ?? ''])
+    const events = (tag.events || []).map(e => [
+        kebab(e.name),
+        (e.arguments || []).map(arg => cleanType(arg.type)).join(', '),
+        str(e.description)
+    ])
+    const slots = (tag.slots || []).map(s => [s.name, str(s.description)])
+    tags[kebab(tag.name)] = { p: props, e: events, s: slots }
+}
+
+const directives = webTypes.contributions.html.attributes.map(d => [
+    d.name,
+    cleanType(d.value?.type),
+    str(d.description),
+    (d['vue-modifiers'] || []).map(m => m.name).filter(m => !m.startsWith('['))
+])
+
+const data = {
+    vuetify: vuetifyPackage.version,
+    strings,
+    tags,
+    directives
+}
+
+fs.mkdirSync(path.dirname(OUTPUT), { recursive: true })
+fs.writeFileSync(OUTPUT, JSON.stringify(data))
+console.log(`vue-editor: wrote Vuetify ${vuetifyPackage.version} data for ${Object.keys(tags).length} components to ${path.relative(process.cwd(), OUTPUT)}`)
diff --git a/test/resources/vue-editor.spec.js b/test/resources/vue-editor.spec.js
new file mode 100644
index 000000000..dd7522c15
--- /dev/null
+++ b/test/resources/vue-editor.spec.js
@@ -0,0 +1,154 @@
+const path = require('path')
+const { pathToFileURL } = require('url')
+
+const should = require('should')
+
+// minimal stand-in for the parts of the monaco namespace that getCompletions uses
+const monaco = {
+    languages: {
+        CompletionItemKind: { Class: 'Class', Module: 'Module', Property: 'Property', Event: 'Event', Field: 'Field', Keyword: 'Keyword', EnumMember: 'EnumMember' },
+        CompletionItemInsertTextRule: { InsertAsSnippet: 4 }
+    }
+}
+
+// a small slice of the generated vuetify.json
+const data = {
+    vuetify: '3.11.3',
+    strings: ['Applies a distinct style to the component.', 'Applies specified color to the control.', 'Event that is emitted when the component\'s model changes.', 'The element used to activate the component.', 'The default Vue slot.'],
+    tags: {
+        'v-btn': { p: [['variant', '\'flat\' | \'text\' | \'outlined\'', 0, '\'elevated\''], ['color', 'string', 1, ''], ['block', 'boolean', -1, 'false']], e: [], s: [['default', 4]] },
+        'v-menu': { p: [['model-value', 'boolean', -1, 'false']], e: [['update:model-value', 'boolean', 2]], s: [['activator', 3], ['default', 4]] }
+    },
+    directives: [['v-ripple', 'boolean | { class: string }', -1, ['center', 'circle']]]
+}
+
+describe('vue-editor (ui-template code editor support)', function () {
+    let vue
+    before(async function () {
+        vue = await import(pathToFileURL(path.join(__dirname, '../../resources/vue-editor/vue-sfc.mjs')).href)
+    })
+
+    describe('kebab', function () {
+        it('converts component, prop and event names', function () {
+            vue.kebab('VBtn').should.equal('v-btn')
+            vue.kebab('VCardActions').should.equal('v-card-actions')
+            vue.kebab('VScrollXReverseTransition').should.equal('v-scroll-x-reverse-transition')
+            vue.kebab('itemsPerPage').should.equal('items-per-page')
+            vue.kebab('v-btn').should.equal('v-btn')
+        })
+    })
+
+    describe('splitAttributeName', function () {
+        it('recognises the Vue prefixes', function () {
+            vue.splitAttributeName(':items').should.eql({ prefix: ':', name: 'items', kind: 'prop' })
+            vue.splitAttributeName('v-bind:items').should.eql({ prefix: 'v-bind:', name: 'items', kind: 'prop' })
+            vue.splitAttributeName('@click.stop').should.eql({ prefix: '@', name: 'click', kind: 'event' })
+            vue.splitAttributeName('v-on:click').should.eql({ prefix: 'v-on:', name: 'click', kind: 'event' })
+            vue.splitAttributeName('#activator').should.eql({ prefix: '#', name: 'activator', kind: 'slot' })
+            vue.splitAttributeName('color').should.eql({ prefix: '', name: 'color', kind: 'attribute' })
+        })
+    })
+
+    describe('literalValues', function () {
+        it('extracts string literals from a union type', function () {
+            vue.literalValues('\'start\' | \'end\' | boolean').should.eql(['start', 'end'])
+            vue.literalValues('string').should.eql([])
+            vue.literalValues(undefined).should.eql([])
+        })
+    })
+
+    describe('getCursorContext', function () {
+        it('detects a tag name', function () {
+            vue.getCursorContext('<template>\n  <v-bt').should.eql({ kind: 'tagName', prefix: 'v-bt', offset: 14 })
+        })
+        it('detects an attribute name, with its prefix', function () {
+            const ctx = vue.getCursorContext('<v-btn color="primary" :var')
+            ctx.should.have.properties({ kind: 'attributeName', tag: 'v-btn', prefix: ':var', offset: 23 })
+        })
+        it('detects a new attribute after a space', function () {
+            vue.getCursorContext('<v-btn block ').should.have.properties({ kind: 'attributeName', tag: 'v-btn', prefix: '' })
+        })
+        it('detects an attribute value', function () {
+            vue.getCursorContext('<v-btn variant="out').should.have.properties({ kind: 'attributeValue', tag: 'v-btn', attribute: 'variant', prefix: 'out' })
+        })
+        it('skips over quoted values that contain > or quotes', function () {
+            vue.getCursorContext('<v-btn @click="a > b ? \'x\' : \'y\'" ').should.have.properties({ kind: 'attributeName', tag: 'v-btn' })
+        })
+        it('returns null in text content, interpolations, comments and script/style blocks', function () {
+            should(vue.getCursorContext('<v-btn>Sen')).be.null()
+            should(vue.getCursorContext('<p>{{ msg.pay')).be.null()
+            should(vue.getCursorContext('<!-- <v-bt')).be.null()
+            should(vue.getCursorContext('<script>\nconst a = 1 <')).be.null()
+            should(vue.getCursorContext('<style>\n.a { color: re')).be.null()
+            should(vue.getCursorContext('</v-btn')).be.null()
+        })
+        it('works again after a script block is closed', function () {
+            vue.getCursorContext('<script>let a</script>\n<v-bt').should.have.properties({ kind: 'tagName', prefix: 'v-bt' })
+        })
+    })
+
+    describe('getParentTag', function () {
+        it('finds the enclosing element', function () {
+            should(vue.getParentTag('<v-card>\n<v-menu>\n')).equal('v-menu')
+            should(vue.getParentTag('<v-card>\n<v-menu></v-menu>\n')).equal('v-card')
+            should(vue.getParentTag('<v-card><img src="x"><br/><v-btn block />')).equal('v-card')
+            should(vue.getParentTag('')).be.null()
+        })
+    })
+
+    describe('getCompletions', function () {
+        const range = { startLineNumber: 1, startColumn: 1, endLineNumber: 1, endColumn: 1 }
+        let catalog
+        before(function () { catalog = vue.createCatalog(data) })
+        const labels = (items) => items.map(i => i.label)
+
+        it('offers Vuetify and Vue tags, PascalCase when typing a capital', function () {
+            labels(vue.getCompletions(monaco, catalog, { kind: 'tagName', prefix: 'v' }, range)).should.containDeep(['v-btn', 'v-menu', 'transition'])
+            labels(vue.getCompletions(monaco, catalog, { kind: 'tagName', prefix: 'V' }, range)).should.containDeep(['VBtn', 'VMenu'])
+        })
+        it('offers props, events, directives for an attribute name', function () {
+            const items = vue.getCompletions(monaco, catalog, { kind: 'attributeName', tag: 'v-btn', prefix: '' }, range)
+            labels(items).should.containDeep(['variant', 'color', 'block', 'v-if', 'v-for', 'v-ripple', 'key', '@click'])
+            items.find(i => i.label === 'block').insertText.should.equal('block') // boolean prop needs no value
+            items.find(i => i.label === 'color').insertText.should.equal('color="$1"')
+        })
+        it('offers bound props for : and v-bind:', function () {
+            labels(vue.getCompletions(monaco, catalog, { kind: 'attributeName', tag: 'v-btn', prefix: ':' }, range)).should.eql([':variant', ':color', ':block'])
+            labels(vue.getCompletions(monaco, catalog, { kind: 'attributeName', tag: 'VBtn', prefix: 'v-bind:co' }, range)).should.containDeep(['v-bind:color'])
+        })
+        it('offers component and DOM events for @', function () {
+            const items = labels(vue.getCompletions(monaco, catalog, { kind: 'attributeName', tag: 'v-menu', prefix: '@' }, range))
+            items[0].should.equal('@update:model-value')
+            items.should.containDeep(['@click', '@keydown'])
+        })
+        it('offers the parent component slots on a <template>', function () {
+            const items = vue.getCompletions(monaco, catalog, { kind: 'attributeName', tag: 'template', prefix: '#', textBeforeTag: '<v-menu>\n  ' }, range)
+            labels(items).should.eql(['#activator', '#default'])
+        })
+        it('offers literal values for a plain prop', function () {
+            labels(vue.getCompletions(monaco, catalog, { kind: 'attributeValue', tag: 'v-btn', attribute: 'variant', prefix: '' }, range)).should.eql(['flat', 'text', 'outlined'])
+            vue.getCompletions(monaco, catalog, { kind: 'attributeValue', tag: 'v-btn', attribute: ':variant', prefix: '' }, range).should.be.empty()
+        })
+        it('returns nothing for unknown components', function () {
+            labels(vue.getCompletions(monaco, catalog, { kind: 'attributeName', tag: 'my-widget', prefix: ':' }, range)).should.be.empty()
+        })
+    })
+
+    describe('getHover', function () {
+        let catalog
+        before(function () { catalog = vue.createCatalog(data) })
+
+        it('describes props, events, slots and directives', function () {
+            vue.getHover(catalog, 'variant', { kind: 'attributeName', tag: 'v-btn' }).should.match(/\*\*variant\*\* \(v-btn prop\)[\s\S]*Applies a distinct style[\s\S]*Default: `'elevated'`[\s\S]*vuetifyjs\.com\/api\/v-btn#props/)
+            vue.getHover(catalog, ':color', { kind: 'attributeName', tag: 'v-btn' }).should.match(/\*\*color\*\*/)
+            vue.getHover(catalog, '@update:model-value', { kind: 'attributeName', tag: 'v-menu' }).should.match(/v-menu event/)
+            vue.getHover(catalog, '#activator', { kind: 'attributeName', tag: 'template', textBeforeTag: '<v-menu>' }).should.match(/v-menu slot/)
+            vue.getHover(catalog, 'v-if', { kind: 'attributeName', tag: 'v-btn' }).should.match(/vuejs\.org\/api\/built-in-directives\.html#v-if/)
+            vue.getHover(catalog, 'v-btn', { kind: 'tagName' }).should.match(/vuetifyjs\.com\/api\/v-btn/)
+        })
+        it('returns null for unknown names', function () {
+            should(vue.getHover(catalog, 'nope', { kind: 'attributeName', tag: 'v-btn' })).be.null()
+            should(vue.getHover(catalog, 'variant', null)).be.null()
+        })
+    })
+})

From f0ecfaef62894dacfc5f406c38f1cf1713f352b9 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Wed, 14 Oct 2026 19:14:02 +0100
Subject: [PATCH 2/2] fix: keep ui-template on html for nr-assistant without
 vue-sfc support

nr-assistant before 0.21.0 only registers its Expert completions and
CodeLens for html, so switching ui-template to vue-sfc would drop them.
nr-assistant 0.21.0 sets supportsVueSfc on its plugin. Read that with
RED.plugins.getPlugin, which exists back to Node-RED 1.3, rather than
RED.plugins.getModule, which only arrived in 4.0.

- vue-sfc when nr-assistant isn't installed or sets supportsVueSfc
- html when an older nr-assistant is installed
- the check lives in the vue-editor plugin as useVueSfc()
---
 nodes/plugins/vue-editor.html  | 20 +++++++++++++++++++-
 nodes/widgets/ui_template.html |  4 ++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/nodes/plugins/vue-editor.html b/nodes/plugins/vue-editor.html
index 7f3213f3d..57fd7d54e 100644
--- a/nodes/plugins/vue-editor.html
+++ b/nodes/plugins/vue-editor.html
@@ -71,9 +71,27 @@
             return true
         }
 
+        /**
+         * nr-assistant before 0.21.0 only gives ui-template Expert completions and its CodeLens for html,
+         * so keep ui-template on html when an older nr-assistant is installed.
+         */
+        function assistantSupportsVueSfc () {
+            const assistant = RED.plugins.getPlugin('flowfuse-nr-assistant')
+            return !assistant || assistant.supportsVueSfc === true
+        }
+
+        /**
+         * Registers the language if needed. Safe to call more than once.
+         * @returns {boolean} true when ui-template should use the vue-sfc language
+         */
+        function useVueSfc () {
+            return RED.editor.codeEditor?.editor?.type === 'monaco' && assistantSupportsVueSfc() && ensure()
+        }
+
         RED.plugins.registerPlugin(PLUGIN_ID, {
             onadd: ensure,
-            ensure
+            ensure,
+            useVueSfc
         })
     })()
 </script>
diff --git a/nodes/widgets/ui_template.html b/nodes/widgets/ui_template.html
index 834506e7e..f20bdfffc 100644
--- a/nodes/widgets/ui_template.html
+++ b/nodes/widgets/ui_template.html
@@ -184,9 +184,9 @@
                 const $templateScope = $('#node-input-templateScope')
 
                 // Monaco gets Vue/Vuetify syntax and completions from the ui-template-vue-editor plugin (nodes/plugins/vue-editor.html).
-                // ACE, or Monaco without the plugin, keeps the HTML mode.
+                // ACE, Monaco without the plugin, or an nr-assistant too old for vue-sfc keeps the HTML mode.
                 const vueEditor = RED.plugins.getPlugin('ui-template-vue-editor')
-                const htmlMode = RED.editor.codeEditor?.editor?.type === 'monaco' && vueEditor?.ensure?.() ? 'ace/mode/vue-sfc' : 'ace/mode/html'
+                const htmlMode = vueEditor?.useVueSfc?.() ? 'ace/mode/vue-sfc' : 'ace/mode/html'
 
                 // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                 // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)