TresJs + Quasar cli

Question

I am creating a SPA using Vue.js. To simplify things, I started the project with the Quasar framework. I wanted to implement 3D components on my site and, after searching a bit online, I found that TresJs does exactly what I need (https://docs.tresjs.org/). Experimenting a bit in the playground and creating a dummy project with Vite+Vue, I decided to implement the plugin in my Quasar project.

Below are my Quasar info:

Operating System - Windows_NT(10.0.19045) - win32/x64
NodeJs - 20.11.0

Global packages:
NPM - 10.4.0
yarn - Not installed
@quasar/cli - 2.3.0
@quasar/icongenie - Not installed
cordova - Not installed

Important local packages:
quasar - 2.14.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 1.7.3 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.4.15 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.2.5
pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
vuex - Not installed
vite - 2.9.17 -- Native-ESM powered web dev build tool
eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed

Quasar App Extensions:
None installed

My problem is that I can't properly register the plugin in my project. To explain further, I inserted the "donut example" on one of my pages and it generally displays correctly, except that if I open the console, I get a myriad of warnings:

Failed to resolve component: [Component Name]
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <IndexPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <QPageContainer>
at <QLayout view="lHh Lpr lFf" >
at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>

<template>
  <q-page class="flex flex-center q-gutter-md">
    <q-card-section :horizontal="$q.screen.width > 800">
      <div class="col-1"></div>
      <q-card-section class="col-3">
        <q-card-section class="col-12 q-my-auto">
          <div class="text-h4 text-center">{{ $t("projectTitle") }}</div>
        </q-card-section>
        {{ $t("projectInfo") }}
      </q-card-section>
      <q-card class="col" flat bordered>
        <TresCanvas clear-color="#82DBC5">
          <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
          <TresMesh>
            <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
            <TresMeshBasicMaterial color="orange" />
          </TresMesh>
          <TresAmbientLight :intensity="1" />
        </TresCanvas>
      </q-card>
    </q-card-section>
  </q-page>
</template>

<script setup>
import { TresCanvas } from "@tresjs/core";
</script>

I presume that my error lies in my quasar.config.js file, but I can't figure out a solution on my own or on the web.

My current quasar.config.js file is as follows:

// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js

const { configure } = require("quasar/wrappers");
const path = require("path");

module.exports = configure(function (/* ctx */) {
  return {
    eslint: {
      warnings: true,
      errors: true,
    },
    
    boot: ["i18n", "axios", "firebase"],

    css: ["app.scss"],

    extras: [
      "roboto-font", // optional, you are not bound to it
      "material-icons", // optional, you are not bound to it
    ],

    build: {
      target: {
        browser: ["es2019", "edge88", "firefox78", "chrome87", "safari13.1"],
        node: "node20",
      },

      vueRouterMode: "hash",

      vitePlugins: [
        [
          "@intlify/vite-plugin-vue-i18n",
          {
            include: path.resolve(__dirname, "./src/i18n/**"),
          },
        ],
      ],
    },

    devServer: {
      open: true,
    },

    framework: {
      config: {},
      plugins: [],
    },

    animations: [],

    ssr: {
      pwa: false,
      prodPort: 3000,
      middlewares: [
        "render", // keep this as last one
      ],
    },

    pwa: {
      workboxMode: "generateSW",
      injectPwaMetaTags: true,
      swFilename: "sw.js",
      manifestFilename: "manifest.json",
      useCredentialsForManifestTag: false,
    },

    cordova: {},

    capacitor: {
      hideSplashscreen: true,
    },

    electron: {
      inspectPort: 5858,
      bundler: "packager",
      packager: {},
      builder: {
        appId: "myAppId",
      },
    },

    bex: {
      contentScripts: ["my-content-script"],
    },
  };
});

Answer 1

Add this to build section in your quasar.config.js and it should work:

build: {
  viteVuePluginOptions: {
    template: {
      compilerOptions: {
        isCustomElement: tag => tag.startsWith('Tres-') || tag.startsWith('tres-')
      }
    }
  }