00:05
All right, so before we change anything inside of our project,
00:07
let's go ahead and jump into our terminal
00:09
and boot it up and see what it looks like.
00:10
So npm run dev.
00:12
We'll get our server up and running,
00:13
so let's go ahead and run that.
00:14
All right, we can click on the server address right here
00:17
by holding Command and clicking it,
00:19
and it opens up our application inside of our browser
00:21
at localhost and the default port of 3333.
00:24
And sweet, so we can see that our application's up running
00:27
and working a-okay.
00:28
As a next step, let's go ahead and get the core dependencies
00:31
of our application installed.
00:32
So that's going to be tail and CSS,
00:34
shodcm-view, which is our view component library,
00:36
and then on top of that,
00:37
since shodcm-view puts the components
00:40
directly inside of our project,
00:41
we'll go ahead and incorporate
00:42
an automatic component import and registration step
00:45
within our project flow so that we don't have to worry
00:47
about importing them every time that we want to use a component.
00:50
So as it goes in programming,
00:51
almost immediately after we finished recording the series,
00:53
shodcm-view released a brand new major version
00:56
of their component library, which is version one for them.
00:59
This major version change consists of a number
01:01
of breaking changes,
01:03
one of which is the installation process itself.
01:06
It requires a little bit more manual work
01:08
on our behalf to get it set up.
01:10
And in addition to that, they've also switched
01:12
from using Radex UI as their underlying UI component library,
01:16
which they build all of their components on top of,
01:19
to now using Reka UI.
01:20
Now Reka UI is essentially the next iteration of Radex UI.
01:25
They both sound similar, they're from the same people.
01:28
It's just consider it a next major change version for them.
01:31
And then they decided to change the name as well.
01:34
So behaviorally, it should be similar,
01:36
though there are bound to be a number of changes
01:38
in what they expect between their components,
01:40
which in turn would mean a number of changes
01:42
inside of the shodcm-view components
01:43
between prior to version one and version one itself.
01:46
So because of those two things,
01:47
I'm gonna recommend that you stick
01:49
with the Radex UI version of shodcm-view
01:52
for consistency with this series
01:54
so that my experience matches what you'll experience
01:56
as you follow the series along.
01:58
Now, unfortunately, that does mean that the command
02:01
that we need to run in order to install things
02:03
will vary slightly.
02:04
So if we go into the installation steps,
02:05
go into Vite here,
02:07
this is the documentation that we need to follow
02:09
in order to get things set up
02:10
in accordance with using Radex UI.
02:12
And this is the exact flow that we'll walk through here
02:14
in a moment whenever we continue
02:16
our regularly scheduled lesson.
02:17
If we go ahead and scroll on down, however,
02:20
we will see that whenever we run
02:22
their shodcm-view mpx command,
02:25
we now need to @radex.
02:27
This will differ from my experience in the lessons
02:30
to your experience now because of this new major change.
02:34
We now need to target the old version
02:35
whenever we run these commands.
02:37
So note that any time that you're installing a component,
02:40
initializing shodcm-view itself,
02:42
you're gonna need to @radex
02:44
where I did not inside of these lessons.
02:46
So where I just run mpx shodcm-view init,
02:50
I will need to run mpx shodcm-view @radex init.
02:54
This same thing rings true
02:56
any time that we install a component.
02:58
The new command is mpx shodcm-view @radex add,
03:02
and then the component name.
03:03
Whereas throughout the series,
03:04
I will just be running mpx shodcm-view add button.
03:09
Without this @radex specification,
03:11
it will try to install the newer Raker UI versions,
03:15
which again can and will differ from the components
03:18
that I'm using throughout the series.
03:20
So whenever I install components throughout the series,
03:22
I tend to use the Visual Studio Code plugin for that.
03:25
Unfortunately, I don't believe that there's a way
03:26
to target a specific version with that.
03:29
So you're gonna need to probably manually
03:31
type the command in itself.
03:34
The Visual Studio Code plugin just opened up the terminal
03:37
and plopped the command in there and ran it for me.
03:39
So you'll still see the command that's actually run
03:42
inside of the terminal on screen.
03:44
Just remember to add the @radex qualification to that
03:47
prior to running it yourself.
03:50
Okay, that should be all for the changes here.
03:52
Let's go ahead and continue with the regularly scheduled lesson.
03:55
So to start out with, I have a secondary tab open up here
03:57
for shodcm-view.
03:58
You can find the documentation at shodcm-view.com,
04:02
and you can find the installation instructions
04:03
that we'll be following by clicking getting started
04:05
and going to the install tab.
04:07
AdonisJS uses VEET,
04:08
so we will be using the VEET instruction steps.
04:11
And step one of their instructions
04:12
has you create a brand new project.
04:14
Well, we already have a project that we're working within,
04:16
so we're just gonna skip straight to step two,
04:18
which is getting TailwindCSS installed.
04:20
So we can go ahead and give that command there a copy
04:22
and jump back into our terminal,
04:24
stop our server, clear that out,
04:26
and paste that command in.
04:27
To update this lesson slightly,
04:29
TailwindCSS just released version four
04:30
as of January 22nd, 2025.
04:33
And at present, much of their plugin community
04:35
is not yet up to date with version four.
04:37
To ensure that everything for you works the same
04:39
as it has for me throughout this series,
04:41
I'm gonna go ahead and recommend that you stick
04:43
with TailwindCSS version three
04:44
to avoid any potential confusion or anomalies.
04:47
And then later on, once you're comfortable
04:49
with what's going on, you can always update the version four,
04:51
which we'll be sure to have a guide out soon for that.
04:54
So to install version three,
04:55
you want to do npm i -D to target this as a dev dependency,
04:59
TailwindCSS, @, and then add a three in,
05:03
and it will automatically grab the latest version
05:05
with a major of three.
05:07
Then go ahead and tack on auto-prefixer as well.
05:10
Hit enter to go ahead and run that,
05:11
and you'll be all set.
05:13
Awesome, so that installed a-okay.
05:14
I'm gonna go ahead and clear that out as well.
05:16
Next, we're gonna want to jump into our projects.
05:18
I'm gonna hide my browser away and jump back in here,
05:20
go into our v-config.
05:21
We'll see a red squiggly just because all of this
05:23
is on one line.
05:24
If we give our project a save there,
05:26
and you have ESLint configured,
05:27
it will go ahead and run the fix for that
05:29
to add new lines for each of those.
05:31
What we need to do now is set up Tailwind
05:33
in auto-prefixer, so we can do that by doing CSS,
05:36
providing an object inside of there.
05:37
Tailwind and auto-prefixer are for post-CSS,
05:40
which we will be using and comes pre-installed with VEAP.
05:42
So we can go ahead and specify a configuration
05:44
for that right here.
05:45
And specifically, we want to add them as plugins,
05:48
so we'll add a plugins array there as well.
05:50
We're going to want to use the Tailwind plugin
05:53
as well as the auto-prefixer plugin there.
05:56
And you'll see that neither of those auto-imported for me,
05:58
so I'm gonna jump up to the top of my file
06:00
and import Tailwind from TailwindCSS
06:04
and import auto-prefixer from auto-prefixer.
06:08
Give that a save to fix our squigglies,
06:10
and there we go.
06:11
Out of the box, AdonisJS and its Inertia Starter Kit
06:14
started us with an Inertia plugin
06:16
that specified that we do want to use SSR,
06:18
the Vue plugin, so if you're using Vue, that will be there,
06:21
and your traditional AdonisJS plugin
06:23
that comes with any AdonisJS project.
06:25
The resolve alias right down here
06:27
is going to allow us to import files
06:29
from the Inertia directory using a alias of tilde.
06:33
So for example, up here in this comment,
06:35
let's say we wanted to import something
06:36
from Inertia components header.
06:39
We would be able to do that in Vue via import header
06:42
from your string to the tilde to specify this alias slash,
06:46
and now we're already looking inside of our Inertia directory,
06:49
so we would just need to do components/header.vue there
06:53
to import that file prefix that with an example there as well.
06:56
As a heads up, if you are looking at the shodcm-vue,
06:58
if we scroll down a little bit,
06:59
they use an at character for their alias.
07:01
We're going to stick with a tilde.
07:02
The differentiation there doesn't really matter at all.
07:04
Either one will get the job done.
07:05
All right, let's hide that back away.
07:07
This resolve alias is also defined by default
07:10
inside of our Inertia TS config directory right here
07:13
with the paths under our compile options.
07:16
So if you do change that to say the at character instead,
07:19
you want to make that change here as well.
07:21
We're sticking with the defaults of the Inertia starter kit,
07:24
so we will leave those as is.
07:25
All right, so our vconfig should be all set up.
07:28
shodcm-vue comes with its own configuration step
07:30
that's going to alter some things inside of a project.
07:33
So we're going to want to jump inside of our CSS file
07:35
inside of our Inertia directory,
07:37
and just go ahead and delete this out
07:38
because it's going to add one in for us automatically.
07:41
So we'll delete that there and move the trash for right now.
07:44
Once we've deleted that,
07:45
we can jump back inside of our terminal.
07:46
Make sure you're at the root of your application there,
07:49
and let's run shodcm-vue's configuration command,
07:51
mpx shodcm-vue at latest init.
07:56
We can hit enter to start this,
07:57
and it's going to walk us through some questions
08:00
to determine how we want it configured.
08:01
So we are using TypeScript here, so we'll hit yes for that.
08:04
Out of these options, we're using Vite,
08:06
so we will move forward with Vite there.
08:07
We'll go ahead and stick with just the default style.
08:09
This is really asking which flavor of gray
08:12
you would like to use with TailwindCSS.
08:14
I tend to stick with Slate, so I'll be going with that.
08:16
This is inconsequential,
08:17
so feel free to select whichever one you would prefer.
08:20
Then it's going to ask where our tsconfig file is located.
08:22
Now, this is going to be our Inertia tsconfig
08:25
because shodcm-vue is specific to our Vue application.
08:29
So we don't want to point it to our root tsconfig
08:31
like the default is here,
08:32
but instead to our Inertia tsconfig.
08:35
So we'll do ./inertia/tsconfig.json
08:40
to ensure that it is looking inside of our Inertia directory
08:43
for that tsconfig.
08:44
Then it's going to ask where our global CSS file is.
08:47
This is that file that we just deleted
08:48
out of our Inertia CSS directory.
08:51
So we can point it to Inertia CSS,
08:54
and that file is called app.css.
08:56
So we can hit enter there as well.
08:57
And it'll ask us whether or not we want to use CSS variables.
09:00
This will set up our Tailwind configuration
09:02
in a way where it will use CSS variables,
09:04
which I tend to prefer, so I will hit yes here.
09:06
Then it's going to ask where we want our Tailwind config
09:09
to be located.
09:10
Default is a-okay there.
09:11
We can have that at the root of our application.
09:13
And here's an important distinction
09:14
that's going to ask us to configure our import alias.
09:17
Their default is using the @ character.
09:19
The Inertia starter kit uses a tilde instead.
09:22
So we'll overwrite this instead of using the @ character
09:25
with tilde/components there.
09:27
Same thing here for utilities, tilde/
09:30
and we can put that at lib/utils,
09:32
sticking with their defaults there for everything
09:34
except for the @ character.
09:36
We're replacing that with a tilde.
09:37
Then lastly, we'll have it go ahead
09:38
and write everything that we've configured here
09:40
to a components.json file.
09:41
So we'll hit yes for that.
09:42
Then it's going to set all of this up for us.
09:45
And once it says success,
09:46
everything should be ready to go for us.
09:48
So in the background here, on our side of our text editor,
09:50
we should see a couple of things got added in.
09:52
First, we now have a CSS file back inside of our application
09:55
with the same name that we were using originally.
09:57
So we don't need to change any of our configuration there.
10:00
With this, it's added the Tailwind directives
10:02
as well as set it up in a way where we use CSS variables
10:05
for our colors.
10:06
And these are then passed into our Tailwind configuration.
10:09
And you can see it's also using layers here as well
10:11
to designate priority on certain things.
10:14
We now also have a components directory.
10:16
This is where it will install our shotCN components
10:19
as we install them individually.
10:20
It will put them inside of a subdirectory
10:22
inside of components called UI.
10:24
And we also now have a lib with utilities added in.
10:27
This is really just a single function of CN
10:30
that's just going to merge classes together.
10:32
I'm not sure if we actually ever make use of this,
10:34
but this is something that shotCN view uses internally
10:37
inside of the components as well.
10:39
Okay, so we can collapse those back down,
10:41
scroll down a little bit further,
10:43
and we should see in addition to those two files,
10:45
a components.json that just kind of holds
10:47
our shotCN configuration inside of it,
10:49
specifying that we are using TypeScript,
10:51
that we're using the default style,
10:52
where our TS config is, the Tailwind config,
10:55
what framework we're using, and the aliases there as well.
10:57
And then lastly, our Tailwind config,
10:59
which has now been added.
11:00
If you're using ESLint, you can go ahead
11:02
and give that a save or replace all of the double quotes
11:04
with single quotes.
11:05
And then you can see that it sets our theme up
11:06
and it extends our colors
11:08
so that we are using CSS variables for all of those.
11:11
And it also adds in their animate plugin there
11:13
that they use as well.
11:14
So you can tell by the red squigglies here
11:15
that we definitely want to change some things
11:17
inside of here, but most importantly,
11:18
we're going to want to make sure that our content is updated
11:21
because currently this thinks that we're working off
11:23
of the root of our project, which we are not.
11:25
All of our view-based stuff is going to be specifically
11:27
inside of our inertia directory.
11:29
So we want to update that accordingly.
11:30
We can also simplify their strings there
11:32
a little bit as well.
11:33
So we can do ./inertia,
11:35
have this considered the pages directory,
11:37
components directory, app, and layouts directory
11:40
inside of our inertia directory.
11:42
And then any sub folder and any sub file
11:44
inside of those folders ending with TS, TSX, or view.
11:49
And that should account for most use cases here.
11:52
We can go ahead and update this to account
11:53
for our EdgeJS pages should we add any as well.
11:56
So ./resources/views. ./. in any Edge file there.
12:01
Cool. And then we are using modules instead of common.js.
12:07
So we just need to update our imports
12:10
and our exports accordingly.
12:11
So export default there.
12:14
And then instead of using require,
12:15
we want to import animate from TailwindCSS animate.
12:20
There we go.
12:22
And that should be all of the red squigglies
12:23
that we had inside of this file.
12:24
Looks good.
12:25
So let's install a test by installing our first component.
12:27
Now, if you are using Visual Studio Code,
12:29
there is a plugin that we can use to make this easier.
12:32
So we can search shodcn-view.
12:36
And you should see this right here by Selman Dev.
12:39
And give that an install.
12:40
And what this will allow us to do
12:42
is use the command palette to install components as needed.
12:46
So if we hide both these files away
12:48
and let's do command shift P, type in shodcn/view,
12:53
you should see all of the applicable commands
12:54
this plugin has added.
12:56
We can add a new component.
12:57
We can add multiple components,
12:58
open a documentation and reload the components list there.
13:01
What we want to do right now is install our first component.
13:04
So we will click on install new components.
13:06
And let's just search for a button
13:08
as that's a typical use case there.
13:10
What that's going to do is it's going to run
13:11
npx shodcn-view at latest,
13:13
add button to install that inside of our project for us.
13:17
So once that's run,
13:18
we can go ahead and close out that terminal altogether.
13:21
And now if we look inside of our inertia components UI directory,
13:24
we should see a UI and a button directory within there
13:27
that has our shodcn button
13:29
as well as an index file inside of there.
13:32
So it has successfully installed our button.
13:34
What we can do is jump inside of our page,
13:35
go inside of our home.view page.
13:37
This is the page that's rendered out
13:38
whenever we boot our application
13:40
and open it up inside of the browser.
13:41
And let's just drop a button on here.
13:43
So we can do import.
13:44
This is not an export default, but rather a named export.
13:47
So we'll import button from tilde
13:50
to use our alias/components/ui/button.
13:55
And that index file inside of the button directory that we saw
13:57
just allows us to reach directly for the button directory as a whole
14:01
rather than a specific file inside of there.
14:03
So now we can make use of our button by doing button.
14:06
And we can just do example button for the actual text.
14:09
Give that a save.
14:10
Let's jump back inside of our terminal,
14:12
clear that out and npm run dev to boot everything back up.
14:15
We can command click on our server address to open it back up.
14:18
And there we go.
14:19
Our example button looks like a shotcn button as it's supposed to.
14:22
So everything there is working a-okay.
14:24
Furthermore, all of the initial styles that we had saw
14:26
whenever we booted our application up initially are now gone
14:29
because our app.css file has been deleted and overwritten.
14:33
Cool. So last thing to take care of here
14:34
that I promised at the beginning of this lesson is automatic imports
14:37
so that we don't have to add that button import
14:38
or any other imports for the components that we have installed
14:41
as we're working on things.
14:42
So let's hide that back away.
14:43
Stop our server here for a moment, clear that out.
14:46
And let's do npm i -D to install this as a dev dependency.
14:51
Unplugin -view -components.
14:54
Let's install that.
14:56
And this is the package that's going to allow us
14:57
to automatically import components
14:59
without actually having to write the import ourselves.
15:02
It will detect that we're making use of the component
15:04
and register it inside of a file that will then be used
15:07
whenever we build our final assets.
15:09
So that installed successfully, we can go and clear that out,
15:11
jump back into our text editor
15:12
and specifically go down to our V configuration
15:15
because we need to wire this up.
15:16
We can import the components plugin from unplugin -view -components
15:21
and we want to use specifically their V component plugin.
15:25
So with that defined, what we want to do is add that
15:27
to our V configuration plugins.
15:29
So underneath our AdonisJS plugin here,
15:32
we can add components, call this as a function
15:35
and provide it in some options.
15:37
First, what we're going to want to do is tell it
15:38
which directories to look for.
15:39
We only have a single directory here,
15:41
which is our inertia components directory.
15:44
We want to have everything inside of there
15:45
we want it to consider so that as we make use of it
15:47
inside of our pages or even other components,
15:50
it will map those imports automatically for us
15:52
so that we don't need to make them manually.
15:53
Then since we are using TypeScript
15:55
and we are using Visual Studio Code,
15:57
which supports this configuration option,
15:59
we'll specify DTS and set that to true.
16:02
This DTS option tells the unplugin -view -components
16:04
that we want to generate out a TypeScript friendly configuration
16:08
of our component mappings,
16:09
which essentially is going to add TypeScript support
16:12
to these automatic imports for us.
16:14
This may or may not work with your text editor.
16:16
It does work with Visual Studio Code,
16:17
so we are okay here to go ahead and use it.
16:20
With that defined, let's go ahead and jump inside
16:22
of our home page again,
16:24
and let's just remove the import altogether.
16:26
With that import gone,
16:27
we're still going to make use of our button,
16:29
but now that unplugin -view -components plugin
16:31
is going to automatically detect
16:32
that we're making use of a button component,
16:34
map that back to the actual component
16:36
that we have inside of our components directory
16:39
and automatically register it for us
16:40
whenever we start our server.
16:42
So let's jump back into our terminal,
16:44
npm run dev to start our server,
16:46
and whenever we did that, you should see
16:47
that a components.d.ts got added to the root of our project.
16:51
If we open this up real quick,
16:52
you'll see that it detected
16:53
that we're making use of our button
16:54
and it registered an import for it.
16:56
So if we open our browser back up,
16:58
you see our page just refreshed there
16:59
and we still see our button.
17:00
Let's do a sanity hard refresh here as well,
17:03
and we still see our button.
17:04
So everything there is working a-okay.
17:07
So we now have tailwind configured,
17:08
shotscm-view configured,
17:10
and automatic imports from our components directory
17:12
configured as well.
17:14
Now, one thing you may have noticed
17:15
is that the components that we actually import
17:17
within our script, so for example,
17:19
we're importing the head component
17:20
from inertia-js-view-3 here.
17:21
Those components are purple, at least within my theme,
17:24
whereas the ones using the automatic component import
17:27
from unplug-in-view-components
17:29
are the same color as any traditional HTML element,
17:32
for example, our button here.
17:34
And the reason for that is because TypeScript
17:36
is not aware of these.
17:38
For example, our automatically imported button
17:40
is currently a type of unknown,
17:41
which means that if we needed to use this button
17:43
as a ref inside of our script,
17:45
it wouldn't know what type to automatically map that to.
17:47
Now, I'm circling back at the end of this series
17:50
and adding this in, so the rest of the series,
17:51
we're gonna make use of components
17:52
just as they are right here.
17:54
But if you would like for your components
17:56
to have types automatically associated with them,
17:59
even being automatically imported
18:01
with unplug-in-view-components,
18:02
then we can easily do that
18:04
by registering our components.d.ts file,
18:07
which is the file that maps all of those components
18:09
to their actual location
18:11
inside of our inertia-files-ts-config.json.
18:15
And what we wanna do is map to that components.d.ts file
18:19
from the include array.
18:21
So we need to go back a directory
18:22
so that we're back inside of the root folder
18:25
and then map to our components.d.ts
18:28
if you would like TypeScript support
18:29
for those automatically imported components.
18:31
So with that said, if we jump back into our home.view,
18:34
you'll notice that my button is now purple
18:36
in association with my theme,
18:38
noting that the type of this button
18:40
is now this really long VLS with template slots,
18:44
defined component VLS with defaults,
18:46
so on and so forth, just mapping it back
18:48
through the imports to its actual type.
18:50
Again, as noted, I'm not using this
18:52
throughout the rest of the series,
18:53
but if you are, you may notice some mismatched types
18:57
as we progress, for example,
18:58
things that I provide as a number
19:00
that are meant to be a string
19:02
or vice versa for their prop values.
19:04
But things will still work A-okay for you.
19:06
You may just need to appropriately adjust types as needed there.
Join The Discussion! (14 Comments)
Please sign in or sign up for free to join in on the dicussion.
yunus-elmas
Im following along using SolidJS, but got stuck at the auto imports package as it seems to be a vue specific library - how may i get this working with a SolidJS setup? Thanks!
Please sign in or sign up for free to reply
tomgobich
Hi yunus! Apologies for the delayed response! I'm not familiar with the SolidJS ecosystem in the slightest, so I unfortunately do not know. You might have luck using unplugin-auto-import, that is what unplugin-vue-components utilizes, but I'm not certain whether it'll work nor how it'd need to be configured.
Please sign in or sign up for free to reply
yunus-elmas
Not a problem brother, appreciate the work you're putting into Adonis :). The potential is huge imo and using Inertia fullstack development just makes sense compared to meta frameworks.
I decided to stick to React until SolidJS matures a bit more. One other thing i would like to suggest while here is; could we get more information about deployment options using Adonis? Cleavr was looking promising, but i would like to do server management myself on AWS for example(EC2 or ECS/Fargate if possible)
Please sign in or sign up for free to reply
tomgobich
Thank you, yunus! I very much agree in regards to using Inertia over meta frameworks when you need the full stack! 😊
As for deployment, please see my comment here. The TLDR is it's coming, but not something I do myself all that often. So I just need to dedicate some time to do proper R&D to do some lessons justice. 😁
Please sign in or sign up for free to reply
gribbl
The Vue ecosystem is fantastic. I’ve also set up Prettier with the following plugins:
prettier-plugin-tailwindcss
prettier-plugin-organize-attributes
prettier-plugin-organize-imports
This setup ensures consistent code formatting while keeping Tailwind classes, attributes, and imports perfectly organized.
Please sign in or sign up for free to reply
tomgobich
Yeah, I absolutely love Vue & it's ecosystem!! Thank you for sharing these plugins' gribbl!! 😊
Please sign in or sign up for free to reply
csaba-kiss
@tomgobich I followed your instructions to have the
unpluginpackage to autoimport my shadcn-vue components. It works with simple components like buttons, but more complicated ones, such asresizableneeds radix-vue, and I had trouble setting it up thevite.config.jsto resolve these more complex components. Do you have nay suggestions?Please sign in or sign up for free to reply
tomgobich
Hi, csaba-kiss!! You can try registering radix-vue's unplugin-vue-components plugin to see if that helps. The caveat here is you'll likely need to use the original name defined in radix-vue, rather than renamed components from shadcn-vue.
For example, to auto-import, you'd probably need to use the name "SplitterPanel" rather than shadcn-vue's "ResizablePanel."
I noticed a similar issue when rebuilding the Adocasts CMS and opted to import the components directly instead.
Please sign in or sign up for free to reply
cinqi
Tailwindcss 4.0 is released and it does not work out of the box. So to follow this setup, you need to use tailwindcss 3.x.
Please sign in or sign up for free to reply
tomgobich
Yes, thank you very much cinqi! When v4 launched I added a note to the top of this lesson, but failed to realize the plugin Shadcn-Vue uses likely isn't up-to-date with that yet. I've updated my note to recommend sticking to v3 for now when following this series.
I also have a patch to the video being rendered as we speak, which I should be able to get updated tomorrow.
Please sign in or sign up for free to reply
rajeeb-shakya
i am stuck on initializing shadcn-vue
/var/www $ npx shadcn-vue@latest init
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✖ Validating Tailwind CSS.
✖ Validating import alias.
gives following error:
Please sign in or sign up for free to reply
tomgobich
Hi Rajeeb! Apologies about that, it looks like Shadcn-Vue changed their init command to require more manual work to get things set up. Please try initializing using the latest 0 version with:
I'll have to compare to see what/why they changed it, and I will update this lesson accordingly!
—
Edit: Okay, so it looks like in v1 they've switched the default core library from using Radix-Vue to Reka-UI. Using the below to initialize your Shadcn-Vue installation is now the recommended command to continue using Radix, which is what this series uses.
With this command, this installation should match that covered in this lesson. I'll get this lesson updated accordingly.
Please sign in or sign up for free to reply
rajeeb-shakya
Thanks for guidance. Now it worked.
Please sign in or sign up for free to reply
tomgobich
Anytime, Rajeeb! Awesome, great to hear!
Please sign in or sign up for free to reply