Shadcn-vue -> Can't add component

Exploring laravel 12 with vue starter kit. i start bump into something when i want to add component from shadcn-vue:

laravel12 % npx shadcn-vue@latest add pagination

An invalid components.json file was found at /Users/KerelKA/Website/laravel/laravel12.   

Before you can add components, you must create a valid components.json file by running the init command.
Learn more at https://shadcn-vue.com/docs/components-json.

i see the components.json, but it is not recognize the structure.

{
    "$schema": "https://shadcn-vue.com/schema.json",
    "style": "default",
    "typescript": true,
    "tsConfigPath": "./tsconfig.json",
    "tailwind": {
        "config": "tailwind.config.js",
        "css": "resources/css/app.css",
        "baseColor": "neutral",
        "cssVariables": true,
        "prefix": ""
    },
    "framework": "laravel",
    "aliases": {
        "components": "resources/js/Components",
        "utils": "@/lib/utils",
        "ui": "resources/js/Components/ui",
        "lib": "@/lib",
        "hooks": "@/hooks"
    }
}

i founded that it has something todo with tsConfig.js, aliases, and framework .

i know nothing about typescript but it bother me if the starter kit have problem (or maybe just mine)

if i remove tsConfig.js , framework and change the aliases "resource/js" with "@"

{
    "$schema": "https://shadcn-vue.com/schema.json",
    "style": "default",
    "typescript": true,
    "tailwind": {
        "config": "tailwind.config.js",
        "css": "resources/css/app.css",
        "baseColor": "neutral",
        "cssVariables": true,
        "prefix": ""
    },
    "aliases": {
        "components": "@/Components",
        "utils": "@/lib/utils",
        "ui": "@/Components/ui",
        "lib": "@/lib",
        "hooks": "@/hooks"
    }
}

laravel12 % npx shadcn-vue@latest add pagination
✔ Checking registry.

up to date, audited 362 packages in 4s

101 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
✔ Installing dependencies.
✔ The file utils.ts already exists. Would you like to overwrite? … no
✔ The folder button already exists. Would you like to overwrite? … no
✔ Created 6 files:
  - resources/js/Components/ui/pagination/PaginationEllipsis.vue                                                                    
  - resources/js/Components/ui/pagination/PaginationFirst.vue                                                                        
  - resources/js/Components/ui/pagination/PaginationLast.vue                                                                                                        
  - resources/js/Components/ui/pagination/PaginationNext.vue                                                                       
  - resources/js/Components/ui/pagination/PaginationPrev.vue                                                                       
  - resources/js/Components/ui/pagination/index.ts                                                                                          
ℹ Skipped 3 files:
  - resources/js/lib/utils.ts                                                                                                                                       
  - resources/js/Components/ui/button/Button.vue                                                                                                                    
  - resources/js/Components/ui/button/index.ts

it works.

any suggest?

LaryAI

1 year ago

Level 58

The issue you're encountering seems to be related to the configuration of your components.json file and the way your project is set up with TypeScript and aliases. Here's a step-by-step guide to help you resolve the problem:

Ensure components.json is Correctly Configured: Your initial components.json file seems mostly correct, but you mentioned issues with tsConfig.js, aliases, and framework. Since you're not using TypeScript, you can safely remove the tsConfigPath and typescript properties if they are causing issues. However, if you plan to use TypeScript in the future, it's better to keep them and ensure your tsconfig.json is correctly set up.
Adjust Aliases: You mentioned changing the aliases from "resources/js" to "@". This is a common practice to simplify import paths. Ensure your vite.config.js or webpack.config.js (depending on your setup) is configured to recognize these aliases. For example, in a Vite setup, you might have:
```
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js'),
    },
  },
});
```
Verify Tailwind Configuration: Ensure your Tailwind CSS configuration is correctly set up in tailwind.config.js and that the paths to your CSS files are correct.
Run the Init Command: If you haven't already, make sure to run the init command as suggested by the error message. This will set up the necessary files and configurations for shadcn-vue.
```
npx shadcn-vue@latest init
```
Check for Existing Files: When adding components, if you encounter existing files, decide whether to overwrite them based on your needs. If you have custom modifications, you might want to skip overwriting.
Address Vulnerabilities: The output mentions moderate severity vulnerabilities. It's a good practice to address these by running:
```
npm audit fix
```
This will attempt to automatically fix vulnerabilities. If some remain, you might need to manually update specific packages.

By following these steps, you should be able to resolve the issues with adding components from shadcn-vue. If you continue to face problems, double-check your configuration files and ensure all paths and settings align with your project's structure.

RemiM

1 year ago

Level 16

Checking at their JSON schema for components.json, I don't see the tsConfigPath and frameworkentries, so it's normal that you get an error.

kerelka

1 year ago

Level 15

@RemiM yes, but it comes from starter kit. I don't think they put there for us just to get error in first place right ?

RemiM

1 year ago

Level 16

@kerelka There's a compatibility issue related to the starter kit. If you initialize shadcn-vue using the command npx shadcn-vue@latest init, you'll see it follow their schema. The issue comes from the Laravel starter kit, which includes extra entries that don’t adhere to the component JSON schema. I guess it will be fix soon. At worst, remove the two entries, install your desired components, and them put back the two entries. I'm not sure if it's a deal breaker to remove them entirely for the application to work properly, but just in case you can put them back and you are sure your application will run without any issues.

Note: I just checked the new starter kit with React and the components.json is correct this time, so it's definitely a specific issue with Vue.

1 like

kerelka

1 year ago

Level 15

@RemiM its working fine when i remove those entries. but my concern would be the tsConfig itself

I will explore further, and need to find out if the entry will affect the application or not.

Thank you.