Environment
- Operating System:
Windows_NT
- Node Version:
v16.18.1
- Nuxt Version:
3.2.0
- Nitro Version:
2.2.1
- Package Manager:
[email protected]
- Builder:
vite
- User Config:
-
- Runtime Modules:
-
- Build Modules:
-
Reproduction
I created new nuxt module with nuxi init
npx nuxi init -t module my-module
Describe the bug
I'm creating a nuxt module and I've run into an issue where I can't auto import composables in the playground , this a fresh install.
{
"name": "nuxt3-auth-module",
"version": "1.0.0",
"description": "My new Nuxt module",
"license": "MIT",
"type": "module",
"exports": {
".": {
"types": "./dist/types.d.ts",
"import": "./dist/module.mjs",
"require": "./dist/module.cjs"
}
},
"main": "./dist/module.cjs",
"types": "./dist/types.d.ts",
"files": [
"dist"
],
"scripts": {
"prepack": "nuxt-module-build",
"dev": "nuxi dev playground",
"dev:build": "nuxi build playground",
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
"release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
"lint": "eslint .",
"test": "vitest run",
"test:watch": "vitest watch"
},
"dependencies": {
"@nuxt/kit": "^3.2.2"
},
"devDependencies": {
"@nuxt/eslint-config": "^0.1.1",
"@nuxt/module-builder": "^0.2.1",
"@nuxt/schema": "^3.2.0",
"@nuxt/test-utils": "^3.2.0",
"@nuxtjs/eslint-config-typescript": "^12.0.0",
"changelogen": "^0.4.1",
"eslint": "^8.34.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"nuxt": "^3.2.0",
"prettier": "^2.8.4",
"typescript": "^4.9.5",
"vitest": "^0.28.4",
"vue-tsc": "^1.0.24"
}
}
// src/modules.ts
setup(_moduleOptions, nuxt) {
const resolver = createResolver(import.meta.url);
// add the plugin
const runtimeDir = resolver.resolve('./runtime'); // var to path of runtime
nuxt.options.build.transpile.push(runtimeDir);
addPlugin(resolver.resolve(runtimeDir, 'plugin')); // add plugin to nuxt
addImports({
name: 'useAuth',
as: 'useAuth',
from: resolver.resolve('runtime/composables/useAuth'),
});
},// src/runtme/composables/useAuth.ts
export const useAuth = () => {
return {
login: 'testing composable',
};
};I've also tried addImprtsDir and no luck either
and I also tried the nuxt.hook
nuxt.hook('imports:dirs', (dirs) => {
dirs.push(resolver.resolve(runtimeDir + '/composables'));
});I get an error that useAuth is undefined and I have to import it from import { useAuth } from '#imports';
app.vue inside playground folder
<template>
<div>Nuxt module playground!</div>
<Auth />
</template>
<script setup lang="ts">
const { login } = useAuth();
console.log(login);
</script>
How can I get this to work?
Additional context
No response
Logs
No response
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent