Closed
Description
Vue - Official extension or vue-tsc version
2.2.10
VSCode version
1.99.3 (system setup)
Vue version
3.5.13
TypeScript version
5.8.3
System Info
Windows 11 with WSL to Ubuntu 24
Edition Windows 11 Business
Version 24H2
Installed on 2025-02-24
OS build 26100.3775
Experience Windows Feature Experience Pack 1000.26100.66.0
System:
OS: Linux 5.15 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
CPU: (16) x64 AMD Ryzen 7 7745HX with Radeon Graphics
Memory: 27.47 GB / 31.19 GB
Container: Yes
Shell: 5.2.21 - /bin/bash
Binaries:
Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v22.12.0/bin/yarn
npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
pnpm: 10.6.3 - ~/.local/share/pnpm/pnpmpackage.json dependencies
{
"dependencies": {
"@babel/runtime": "^7.27.0",
"@codemirror/commands": "^6.8.1",
"@codemirror/lang-css": "^6.3.1",
"@codemirror/lang-html": "^6.4.9",
"@codemirror/lang-javascript": "^6.2.3",
"@codemirror/lang-sql": "^6.8.0",
"@codemirror/state": "^6.5.2",
"@codemirror/theme-one-dark": "^6.1.2",
"@codemirror/view": "^6.36.5",
"@quasar/extras": "^1.16.17",
"@regle/core": "^1.1.0",
"@regle/rules": "^1.1.0",
"@tabler/icons-vue": "^3.31.0",
"@tabler/icons-webfont": "^3.31.0",
"@tanstack/vue-query": "^5.74.6",
"@uiw/codemirror-theme-github": "^4.23.10",
"axios": "^1.8.4",
"clone": "^2.1.2",
"codemirror": "^6.0.1",
"codemirror-editor-vue3": "^2.8.0",
"decimal.js": "^10.5.0",
"fluent-vue": "^3.7.1",
"json-bigint": "^1.0.0",
"oidc-client": "^1.11.5",
"pinia": "^3.0.2",
"quasar": "^2.18.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@eslint/js": "^9.25.1",
"@intlify/unplugin-vue-i18n": "^6.0.8",
"@quasar/app-vite": "^2.2.0",
"@rushstack/eslint-patch": "^1.11.0",
"@types/clone": "^2.1.4",
"@types/eslint": "^9.6.1",
"@types/jsdom": "^21.1.7",
"@types/json-bigint": "^1.0.4",
"@types/node": "^22.14.1",
"@typescript-eslint/eslint-plugin": "^8.31.0",
"@typescript-eslint/parser": "^8.31.0",
"@vue/eslint-config-typescript": "^14.5.0",
"autoprefixer": "^10.4.21",
"dotenv": "^16.5.0",
"env-cmd": "^10.1.0",
"eslint": "^9.25.1",
"eslint-config-prettier": "^10.1.2",
"eslint-plugin-vue": "^10.0.0",
"globals": "^16.0.0",
"jsdom": "^26.1.0",
"prettier": "^3.5.3",
"prettier-plugin-multiline-arrays": "^4.0.3",
"ts-node": "^10.9.2",
"type-fest": "^4.40.0",
"typescript": "~5.8.3",
"unplugin-fluent-vue": "^1.4.0",
"vite-plugin-checker": "^0.8.0",
"vite-plugin-vue-devtools": "^7.7.5",
"vite-tsconfig-paths": "^5.1.4",
"vue-tsc": "^2.2.10"
}
}Steps to reproduce
create 3 files:
- a child component that will be included inside the mixin,
- a mixin
- a parent component that will use the mixin.
- when you edit the parent component, the instance of
<ChildComponent />within the template does not receive any coloration or autocomplete, such as for the requiredvalue: stringprop. - everything still compiles and works at runtime, though
ChildComponent.vue
<template>Mixin's child component {{ value }}</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "ChildComponent",
props: {
value: {
type: String,
required: true,
},
},
});
</script>
mixin.ts
import { defineComponent } from "vue";
import ChildComponent from "./ChildComponent.vue";
export const mixin = defineComponent({
components: {
ChildComponent,
},
});
ParentComponent.vue
<template>
<ChildComponent />
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { mixin } from "./mixin";
export default defineComponent({
name: "ParentComponent",
mixins: [
mixin,
],
});
</script>
What is expected?
components registered inside a mixin should have their definitions recognised in the parent components that import the mixin.
What is actually happening?
the mixin's components are colored like native elements in the parent component's template, and there is no component-specific autocomplete options available
Link to minimal reproduction
Any additional comments?
Please let me know if there's something I'm doing wrong.