00:02
All right, so before we change anything
00:06
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, we'll get our server up and running.
00:13
So let's go ahead and run that.
00:15
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:25
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
00:30
the core dependencies of our application installed.
00:32
So that's gonna be tail and CSS, shodcm-view,
00:35
which is our view component library.
00:36
And then on top of that, since shodcm-view
00:39
puts the components directly inside of our project,
00:41
we'll go ahead and incorporate an automatic
00:43
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 wanna use a component.
00:50
So to start out with, I have a secondary tab
00:52
open up here for shodcm-view.
00:53
You can find the documentation at shodcm-view.com.
00:56
And you can find the installation instructions
00:58
that we'll be following by clicking getting started
01:00
and going to the install tab.
01:02
AdonisJS uses VEET, so we will be using
01:04
the VEET instruction steps.
01:06
And step one of their instructions has you create
01:08
a brand new project.
01:09
Well, we already have a project that we're working within,
01:11
so we're just gonna skip straight to step two,
01:13
which is getting tail and CSS installed.
01:15
So we can go ahead and give that command there a copy
01:17
and jump back into our terminal, stop our server,
01:20
clear that out, and paste that command in.
01:22
To update this lesson slightly, tail and CSS
01:24
just released version four as of January 22nd, 2025.
01:28
And at present, much of their plugin community
01:30
is not yet up to date with version four.
01:32
To ensure that everything for you works the same
01:34
as it has for me throughout this series,
01:36
I'm gonna go ahead and recommend that you stick
01:38
with tail and CSS version three
01:39
to avoid any potential confusion or anomalies.
01:42
And then later on, once you're comfortable
01:44
with what's going on, you can always update the version four,
01:46
which we'll be sure to have a guide out soon for that.
01:49
So to install version three, you want to do mbmi-D
01:52
to target this as a dev dependency, tailwind-css, @,
01:57
and then add a three in, and it will automatically grab
01:59
the latest version with a major of three.
02:02
Then go ahead and tack on auto-prefixer as well.
02:04
Hit enter to go ahead and run that, and you'll be all set.
02:07
Awesome, so that installed A-OK.
02:09
We can go ahead and clear that out as well.
02:11
And next, we're gonna want to jump into our projects.
02:13
I'm gonna hide my browser away and jump back in here,
02:15
go into our vconfig.
02:16
We'll see a red squiggly just because all of this
02:18
is on one line.
02:19
If we give our project a save there,
02:20
and you have ESLint configured, it will go ahead
02:22
and run the fix for that to add new lines
02:25
for each of those.
02:26
What we need to do now is set up tailwind
02:27
and auto-prefixer, so we can do that by doing css,
02:30
providing an object inside of there.
02:32
Tailwind and auto-prefixer are for post-css,
02:35
which we will be using and comes pre-installed with VEAP.
02:37
So we can go ahead and specify a configuration
02:39
for that right here.
02:40
And specifically, we want to add them as plugins,
02:43
so we'll add a plugins array there as well.
02:45
We're going to want to use the tailwind plugin
02:48
as well as the auto-prefixer plugin there.
02:51
And you'll see that neither of those auto-imported for me,
02:53
so I'm gonna jump up to the top of my file
02:55
and import tailwind from tailwind-css
02:58
and import auto-prefixer from auto-prefixer.
03:03
Give that a save to fix our squigglies,
03:05
and there we go.
03:06
Out of the box, AdonisJS and its Inertia Starter Kit
03:09
started us with an Inertia plugin
03:11
that specified that we do want to use SSR,
03:13
the Vue plugin, so if you're using Vue, that will be there,
03:16
and your traditional AdonisJS plugin
03:18
that comes with any AdonisJS project.
03:20
The resolve alias right down here is going to allow us
03:23
to import files from the Inertia directory
03:26
using a alias of tilde.
03:28
So for example, up here in this comment,
03:30
let's say we wanted to import something
03:31
from Inertia components header.
03:33
We would be able to do that in Vue via import header from,
03:38
do our string, do the tilde to specify this alias slash,
03:41
and now we're already looking inside
03:43
of our Inertia directory,
03:44
so we would just need to do components/header.vue there
03:48
to import that file.
03:49
Could fix that with an example there as well.
03:51
As a heads up, if you are looking at the shodcm-vue,
03:53
if we scroll down a little bit,
03:54
they use an at character for their alias.
03:56
We're gonna stick with a tilde.
03:57
The differentiation there doesn't really matter at all.
03:59
Either one will get the job done.
04:00
All right, let's hide that back away.
04:02
This resolve alias is also defined by default
04:04
inside of our Inertia TS config directory right here
04:08
with the paths under our compile options.
04:11
So if you do change that to say the at character instead,
04:14
you'll want to make that change here as well.
04:16
We're sticking with the defaults
04:17
of the Inertia starter kit,
04:19
so we will leave those as is.
04:20
All right, so our vconfig should be all set up.
04:23
shodcm-vue comes with its own configuration step
04:25
that's going to alter some things inside of a project.
04:28
So we're going to want to jump inside of our CSS file
04:30
inside of our Inertia directory,
04:32
and just go ahead and delete this out
04:33
because it's going to add one in for us automatically.
04:36
So we'll delete that there and move the trash for right now.
04:39
Once we've deleted that,
04:40
we can jump back inside of our terminal.
04:41
Make sure you're at the root of your application there,
04:44
and let's run shodcm-vue's configuration command,
04:46
npx shodcm-vue @latest init.
04:51
We can hit enter to start this,
04:52
and it's going to walk us through some questions
04:54
to determine how we want it configured.
04:56
So we are using TypeScript here,
04:58
so we'll hit yes for that.
04:59
Out of these options, we're using Vite,
05:00
so we will move forward with Vite there.
05:02
We'll go ahead and stick with just the default style.
05:04
This is really asking which flavor of gray
05:07
you would like to use with TailwindCSS.
05:09
I tend to stick with Slate, so I'll be going with that.
05:11
This is inconsequential,
05:12
so feel free to select whichever one you would prefer.
05:14
Then it's going to ask where our tsconfig file is located.
05:17
Now, this is going to be our inertia-tsconfig
05:20
because shodcm-vue is specific to our Vue application,
05:23
so we don't want to point it to our root-tsconfig
05:26
like the default is here,
05:27
but instead to our inertia-tsconfig.
05:30
So we'll do ./inertia/tsconfig.json
05:35
to ensure that it is looking inside
05:37
of our inertia directory for that tsconfig.
05:39
Then it's going to ask where our global CSS file is.
05:42
This is that file that we just deleted
05:43
out of our inertia-css directory.
05:45
So we can point it to inertia-css,
05:48
and that file is called app.css.
05:51
So we can hit Enter there as well,
05:52
and it'll ask us whether or not we want to use CSS variables.
05:55
This will set up our Tailwind configuration
05:57
in a way where it will use CSS variables,
05:59
which I tend to prefer, so I will hit Yes here.
06:01
Then it's going to ask where we want
06:02
our Tailwind config to be located.
06:04
Default is A-OK there.
06:06
We can have that at the root of our application.
06:08
And here's an important distinction
06:09
that it's going to ask us to configure our import alias.
06:12
Their default is using the @ character.
06:14
The inertia starter kit uses a tilde instead.
06:17
So we'll overwrite this instead of using the @ character
06:19
with tilde slash components there.
06:22
Same thing here for utilities, tilde slash,
06:25
and we can put that at lib, utils,
06:27
sticking with their defaults there for everything
06:29
except for the @ character.
06:30
We're replacing that with a tilde.
06:32
Then lastly, we'll have it go ahead
06:33
and write everything that we've configured here
06:35
to a components.json file, so we'll hit Yes for that.
06:37
Then it's going to set all of this up for us.
06:39
And once it says success,
06:41
everything should be ready to go for us.
06:43
So in the background here,
06:43
in our side of our text editor,
06:45
we should see a couple of things got added in.
06:47
First, we now have a CSS file back inside of our application
06:50
with the same name that we were using originally.
06:52
So we don't need to change any of our configuration there.
06:54
With this, it's added the Tailwind directives,
06:56
as well as set it up in a way where we use CSS variables
06:59
for our colors.
07:01
And these are then passed into our Tailwind configuration.
07:03
And you can see it's also using layers here as well
07:06
to designate priority on certain things.
07:09
We now also have a components directory.
07:11
This is where it will install our ShotCN components
07:13
as we install them individually.
07:15
It will put them inside of a subdirectory
07:17
inside of components called UI.
07:19
And we also now have a lib with utilities added in.
07:22
This is really just a single function of CN
07:24
that's just going to merge classes together.
07:27
I'm not sure if we actually ever make use of this,
07:29
but this is something that ShotCN view uses internally
07:32
inside of the components as well.
07:34
Okay, so we can collapse those back down,
07:36
scroll down a little bit further,
07:38
and we should see, in addition to those two files,
07:39
a components.json that just kind of holds
07:42
our ShotCN configuration inside of it,
07:44
specifying that we are using TypeScript,
07:46
that we're using the default style,
07:47
where our TS config is, the Tailwind config,
07:50
what framework we're using, and the aliases there as well.
07:52
And then lastly, our Tailwind config,
07:54
which has now been added.
07:55
If you're using ESLint, you can go ahead
07:56
and give that a save.
07:57
It will replace all of the double quotes with single quotes.
08:00
And then you can see that it sets our theme up
08:01
and it extends our colors so that we are using
08:03
CSS variables for all of those.
08:05
And it also adds in their animate plugin there
08:07
that they use as well.
08:09
So you can tell by the red squigglies here
08:10
that we definitely want to change some things
08:12
inside of here, but most importantly,
08:13
we're going to want to make sure that our content
08:15
is updated because currently this thinks
08:16
that we're working off of the root of our project,
08:19
which we are not.
08:19
All of our view-based stuff is going to be
08:21
specifically inside of our inertia directory.
08:23
So we want to update that accordingly.
08:25
We can also simplify their strings there
08:26
a little bit as well.
08:27
So we can do ./inertia, have this considered
08:30
the pages directory, components directory,
08:33
app and layouts directory inside of our inertia directory.
08:37
And then any sub folder and any sub file
08:39
inside of those folders, ending with TS, TSX or view.
08:44
And that should account for most use cases here.
08:47
Let me go ahead and update this to account
08:48
for our EdgeJS pages, should we add any as well.
08:51
So ./resources/views, ./.in any Edge file there.
08:56
Cool, and then we are using modules instead of common.js.
09:02
So we just need to update our imports
09:04
and our exports accordingly.
09:06
So export default there.
09:08
And then instead of using require,
09:10
we want to import animate from TailwindCSS animate.
09:15
There we go.
09:16
And that should be all of the red squigglies
09:17
that we had inside of this file, looks good.
09:19
So let's go and give it all a test
09:21
by installing our first component.
09:22
Now, if you are using Visual Studio Code,
09:24
there is a plugin that we can use to make this easier.
09:27
So we can search sub CN-view,
09:31
and you should see this right here by Selman Dev.
09:34
We can give that an install.
09:35
And what this will allow us to do
09:37
is use the command palette to install components as needed.
09:40
So if we hide both these files away
09:43
and let's do command shift P, type in shod CN/view,
09:47
you should see all of the applicable commands
09:49
that this plugin has added.
09:51
We can add a new component,
09:52
we can add multiple components,
09:53
open a documentation and reload the components list there.
09:56
What we want to do right now
09:57
is install our first component.
09:59
So we will click on install new components
10:01
and let's just search for a button
10:03
as that's a typical use case there.
10:05
What that's going to do is it's going to run
10:06
npx shod CN/view at latest,
10:08
add button to install that inside of our project for us.
10:12
So once that's run,
10:12
we can go ahead and close out that terminal altogether.
10:16
And now if we look inside of our Inertia components UI
10:19
directory, we should see a UI
10:21
and a button directory within there
10:22
that has our shod CN button,
10:24
as well as an index file inside of there.
10:26
So it has successfully installed our button.
10:29
What we can do is jump inside of our page,
10:30
go inside of our home.view page.
10:32
This is the page that's rendered out
10:33
whenever we boot our application
10:35
and open it up inside of the browser.
10:36
And let's just drop a button on here.
10:38
So we can do import.
10:39
This is not an export default,
10:41
but rather a named export.
10:42
So we'll import button from tilde
10:45
to use our alias slash components slash UI slash button.
10:50
And that index file inside of the button directory
10:52
that we saw just allows us to reach directly
10:54
for the button directory as a whole,
10:56
rather than a specific file inside of there.
10:58
So now we can make use of our button by doing button.
11:01
And we can just do example button for the actual text.
11:04
Give that a save.
11:05
Let's jump back inside of our terminal,
11:07
clear that out and npm run dev to boot everything back up.
11:10
We can command click on our server address,
11:12
open it back up.
11:13
And there we go.
11:14
Our example button looks like a shod CN button
11:16
as it's supposed to.
11:17
So everything there is working A-okay.
11:19
Furthermore, all of the initial styles
11:21
that we had saw whenever we booted our application
11:23
up initially are now gone
11:24
because our app.css file has been deleted and overwritten.
11:28
Cool, so last thing to take care of here
11:29
that I promised at the beginning of this lesson
11:31
is automatic imports so that we don't have to add
11:33
that button import or any other imports
11:34
for the components that we have installed
11:36
as we're working on things.
11:37
So let's hide that back away.
11:38
Stop our server here for a moment, clear that out.
11:41
And let's do npm i-D to install this as a dev dependency,
11:46
unplugin-view-components.
11:50
Let's install that.
11:50
And this is the package that's going to allow us
11:52
to automatically import components
11:54
without actually having to write the import ourselves.
11:57
It will detect that we're making use of the component
11:59
and register it inside of a file
12:01
that will then be used whenever we build our final assets.
12:04
So that installed successfully,
12:05
we can go ahead and clear that out,
12:06
jump back into our text editor
12:07
and specifically go down to our Vite configuration
12:10
because we need to wire this up.
12:11
We can import the components plugin
12:14
from unplugin-view-components.
12:16
And we wanna use specifically their Vite component plugin.
12:20
So with that defined,
12:21
what we wanna do is add that to our Vite configuration
12:24
plugins.
12:24
So underneath our AdonisJS plugin here,
12:27
we can add components,
12:28
call this as a function and provide it in some options.
12:31
First, what we're gonna wanna do
12:32
is tell it which directories to look for.
12:34
We only have a single directory here,
12:36
which is our inertia components directory.
12:39
Everything inside of there, we want it to consider
12:41
so that as we make use of it inside of our pages
12:43
or even other components,
12:44
it will map those imports automatically for us
12:46
so that we don't need to make them manually.
12:48
Then since we are using TypeScript
12:49
and we are using Visual Studio Code,
12:51
which supports this configuration option,
12:53
we'll specify DTS and set that to true.
12:56
This DTS option tells the unplugin-view-components
12:59
that we want to generate out
13:00
a TypeScript friendly configuration
13:02
of our component mappings,
13:04
which essentially is going to add TypeScript support
13:06
to these automatic imports for us.
13:08
Now this may or may not work with your text editor.
13:10
It does work with Visual Studio Code.
13:12
So we are okay here to go ahead and use it.
13:15
With that defined,
13:16
let's go ahead and jump inside of our home page again,
13:19
and let's just remove the import altogether.
13:21
With that import gone,
13:22
we're still going to make use of our button,
13:24
but now that unplugin-view-components plugin
13:26
is going to automatically detect
13:27
that we're making use of a button component,
13:29
map that back to the actual component
13:31
that we have inside of our components directory,
13:33
and automatically register it for us
13:35
whenever we start our server.
13:36
So let's jump back into our terminal,
13:38
and PM run dev to start our server.
13:40
And whenever we did that,
13:41
you should see that a components.d.ts
13:44
got added to the root of our project.
13:45
If we open this up real quick,
13:46
you'll see that it detected
13:47
that we're making use of our button
13:49
and it registered it import for it.
13:51
So if we open our browser back up,
13:52
you see our page just refreshed there,
13:54
and we still see our button.
13:55
Let's do a sanity hard refresh here as well.
13:58
And we still see our button.
13:59
So everything there is working a-okay.
14:01
So we now have tailwind configured,
14:03
shotcm-view configured,
14:04
and we have automatic imports
14:06
from our components directory configured as well.
14:08
Now, one thing you may have noticed
14:10
is that the components that we actually import
14:12
within our script,
14:13
so for example,
14:14
we're importing the head component
14:15
from inertia-js-view3 here.
14:16
Those components are purple,
14:18
at least within my theme,
14:19
whereas the ones using the automatic component import
14:22
from unplugin-view-components
14:24
are the same color as any traditional HTML element,
14:27
for example, our button here.
14:29
And the reason for that
14:30
is because TypeScript is not aware of these.
14:32
For example, our automatically imported button
14:34
is currently a type of unknown,
14:36
which means that if we needed to use this button
14:38
as a ref inside of our script,
14:39
it wouldn't know what type to automatically map that to.
14:42
Now, I'm circling back at the end of this series
14:45
and adding this in.
14:45
So the rest of the series,
14:46
we're gonna make use of components
14:47
just as they are right here.
14:49
But if you would like for your components
14:51
to have types automatically associated with them,
14:54
even being automatically imported
14:56
with unplugin-view-components,
14:57
then we can easily do that
14:59
by registering our components.d.ts file,
15:02
which is the file that maps all of those components
15:04
to their actual location,
15:06
inside of our inertia-files-ts-config.json.
15:10
And what we wanna do is map to that components.d.ts file
15:14
from the include array.
15:16
So we need to go back a directory
15:17
so that we're back inside of the root folder,
15:20
and then map to our components.d.ts
15:23
if you would like TypeScript support
15:24
for those automatically imported components.
15:26
So with that said,
15:27
if we jump back into our home.view,
15:29
you'll notice that my button is now purple
15:31
in association with my theme,
15:33
noting that the type of this button
15:35
is now this really long VLS with template slots,
15:39
define component VLS with default,
15:41
so on and so forth,
15:41
just mapping it back through the imports
15:43
to its actual type.
15:45
Again, as noted,
15:46
I'm not using this throughout the rest of the series,
15:48
but if you are,
15:49
you may notice some mismatched types as we progress.
15:52
For example, things that I provide as a number
15:55
that are meant to be a string
15:56
or vice versa for their prop values,
15:59
but things will still work A-okay for you.
16:01
You may just need to appropriately adjust types
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