From a217a11c53d74a741e8cda593cc9156714d44a60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6?= <14975046+skjnldsv@users.noreply.github.com> Date: Wed, 21 Oct 2026 13:56:52 +0200 Subject: [PATCH] docs: say how to use in a Vue template MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It is a custom element: Vue tries to resolve it as a component unless told, and some builds, as @nextcloud/vite-config, do not let an app tell it. Show both ways, and why the file is bound with .prop. Assisted-by: ClaudeCode:claude-opus-5-5 Signed-off-by: John Molakvoæ <14975046+skjnldsv@users.noreply.github.com> --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index 620a49e..bee6983 100644 --- a/README.md +++ b/README.md @@ -532,6 +532,27 @@ or a document, put a `` there, give it the file and a size: ``` +`` is a custom element, not a Vue component. In a Vue +template, tell the compiler, or it tries to resolve it as a component and +warns on every render: + +```ts +// vite.config.ts +vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === 'nc-viewer-file' } } }) +``` + +Where the build does not let you set that, as with `@nextcloud/vite-config`, +render it as a dynamic component, which Vue renders as a plain element +without resolving it: + +```vue + +``` + +with `viewerFileTag = 'nc-viewer-file'` in the component's data or setup. A +constant rather than a literal, which linters turn into a static `is`. Bind +`file` with `.prop` either way: it is a DOM property, not an attribute. + ```ts const element = document.createElement('nc-viewer-file') element.file = file