Auto Import with unplugin-vue-components

[adityafawzan]

vite.config.ts :
import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { NaiveUiResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [NaiveUiResolver()],
}),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});

tsconfig.json :
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src//*", "src//.vue"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/": ["./src/*"]
},
"types": ["naive-ui/volar"]
},

"references": [
{
"path": "./tsconfig.vite-config.json"
}
]
}

SFC :

Click Me

<script setup lang="ts"> import { useMessage } from "naive-ui"; const message = useMessage(); function handleClick() { message.info("Button Clicked"); } </script>

so the problem is, the n-button component doesnt show if i use useMessage(), but if i dont use it, the button component shows
any help ?

Updated : useMessage() cannot be used even in Install on Demand Globally

[07akioni]

You should use message provider. Read component document first if you find there is problem.