virtual:meta-layouts shows type declaration error.

[premdasvm]

Hi,

I'm tryna use your package with unplugin-vue-router, everything is working fine, i can see the different layouts and all. but i can't seem to get rid of the type declaration error. 🥲

here is my tsconfig.app.json

{
  "extends": ["@vue/tsconfig/tsconfig.json", "@vue/tsconfig/tsconfig.dom.json"],
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "typed-router.d.ts",
    "auto-imports.d.ts",
    "components.d.ts"
  ],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["vite-plugin-vue-meta-layouts/client"]
  }
}

For reference Repo

[markthree]

@premdasvm Hi, I found out that there is a conflict between extends and compilerOptions types, commenting out extends solves the problem temporarily.

So far I haven't found a ts method that is compatible with your repo. 😭

{
  // "extends": ["@vue/tsconfig/tsconfig.json", "@vue/tsconfig/tsconfig.dom.json"],
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "typed-router.d.ts",
    "auto-imports.d.ts",
    "components.d.ts"
  ],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["vite-plugin-vue-meta-layouts/client"]
  }
}

[premdasvm]

@markthree commenting out the extends wouldn't affect anything else right?

[markthree]

@premdasvm I'm sorry, I'm busy with other work today, I think we can find some kind of configuration to be more compatible with this repo without having to change too many things。

A temporary ignore solution is ↓

// src/router/index.ts
import { routes as fileRoutes } from 'vue-router/auto/routes'
import { createRouter, createWebHistory } from 'vue-router'
// @ts-ignore
import { setupLayouts } from 'virtual:meta-layouts'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // @ts-ignore
  routes: setupLayouts(fileRoutes)
})

export default router

// tsconfig.app.json
{
  "extends": ["@vue/tsconfig/tsconfig.json", "@vue/tsconfig/tsconfig.dom.json"],
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "typed-router.d.ts",
    "auto-imports.d.ts",
    "components.d.ts"
  ],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
    // "types": ["vite-plugin-vue-meta-layouts/client"]
  }
}

Please wait until I'm done with work, I'll take a hard look at this repo and try to find a better type compatibility solution! ✍️

[markthree]

@premdasvm Hi，I took a closer look at the repo, and adding the following option fixes it perfectly without making too many changes.

// tsconfig.app.json
{
  "extends": ["@vue/tsconfig/tsconfig.json", "@vue/tsconfig/tsconfig.dom.json"],
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "typed-router.d.ts",
    "auto-imports.d.ts",
    "components.d.ts"
  ],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
+   "moduleResolution": "Node",
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["vite-plugin-vue-meta-layouts/client"]
  }
}

[PWie]

The actual solution to this is to declare types entry for /client in package.json:

// package.json
{
   // ...
  "exports": {
    "./client": {
      "types": "./client.d.ts"
    },
    "./*": "./*",
    ".": {
      "require": "./dist/index.cjs",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    }
  },
}