How to set up with Nuxt src dir?

[onurusluca]

I use the srcDir structure and when I install shadcn-vue, I get a lot of errors. It works fine without src.

How to install it with srcDir?Couldn't find an example.

Error:

[15:02:12]  ERROR  Internal server error: Failed to resolve import "~/components/ui/button/Button.vue" from "src/pages/index.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: D:/OHBOY/CODING STUFF/PROJECTS/bulut-search/frontend/nuxt-front/src/pages/index.vue:8:19
  14 |  /* Injection by vite-plugin-vue-inspector End */
  15 |  import { defineComponent as _defineComponent } from "vue";
  16 |  import Button from "~/components/ui/button/Button.vue";
     |                      ^
  17 |  const _sfc_main = /* @__PURE__ */ _defineComponent({
  18 |    __name: "index",
  ...
[Vue Router warn]: No match found for location with path "/_nuxt/pages/index.vue"
[Vue Router warn]: No match found for location with path "/_nuxt/pages/index.vue"
[Vue Router warn]: No match found for location with path "/_nuxt/pages/index.vue"
[Vue Router warn]: No match found for location with path "/_nuxt/pages/index.vue"

---

Structure:

Here is the current setup after following the shadcn-vue instructions:

nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    srcDir: "src/",
    alias: {
        // https://nuxt.com/docs/api/nuxt-config#alias
        "~": "./src",
    },
    devtools: { enabled: true },

    modules: ["@nuxtjs/tailwindcss", "shadcn-nuxt"],
    shadcn: {
        /**
         * Prefix for all the imported component
         */
        prefix: "",
        /**
         * Directory that the component lives in.
         * @default "./src/components/ui"
         */
        componentDir: "./src/components/ui",
    },
});

components.json:

{
    "$schema": "https://shadcn-vue.com/schema.json",
    "style": "new-york",
    "typescript": true,
    "tailwind": {
        "config": "tailwind.config.js",
        "css": "/src/assets/styles/tailwind.css",
        "baseColor": "slate",
        "cssVariables": true
    },
    "framework": "nuxt",
    "aliases": {
        "components": "@/components",
        "utils": "~/utils/shadcn"
    }
}

[sadeghbarati]

I'll share a StackBlitz

[onurusluca]

That'd be great. Thanks a lot!

[onurusluca]

@sadeghbarati I've updated and added more info.
Any updates?

[sadeghbarati]

https://stackblitz.com/edit/github-nqwmsm

I had an error with shadcn-nuxt in Stackblitz I tried manual shadcn module

It's working with predefined Nuxt aliases

✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which framework are you using? › Nuxt
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … src/assets/css/tailwind.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Where is your tailwind.config located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Write configuration to components.json. Proceed? … yes

---

I'll try to update module deps so that in the next release you can work with shadcn-nuxt without error

Error: Cannot find module '@oxc-parser/binding-linux-x64-musl'
Require stack:
- /home/projects/github-nqwmsm/node_modules/oxc-parser/index.js

[onurusluca]

@sadeghbarati Thank you, I will take a look.
That would be great! Thanks for your time.