⏳ Chapters
- Running Our Project
- Installing Shadcn-Vue & TailwindCSS
- Configuring Shadcn-Vue
- Configuring TailwindCSS
- Installing Our First Shadcn-Vue Component
- Testing Our Button Component
- Automatic Component Registration
Setting Up TailwindCSS, Shadcn-Vue, and Automatic Component Imports
In this lesson, we'll install and configure Shadcn-Vue and TailwindCSS. We'll then set up automatic imports for all of our local Vue components.
- Author
- Tom Gobich
- Published
- Aug 20
- Duration
- 13m 23s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Setting Up TailwindCSS, Shadcn-Vue, and Automatic Component Imports
-
All right, so before we change anything
-
inside of our project,
-
let's go ahead and jump into our terminal
-
and boot it up and see what it looks like.
-
So npm run dev, we'll get our server up and running.
-
So let's go ahead and run that.
-
All right, we can click on the server address right here
-
by holding command and clicking it.
-
And it opens up our application inside of our browser
-
at localhost and the default port of 3333.
-
And sweet, so we can see that our application's up running
-
and working a-okay.
-
As a next step, let's go ahead and get
-
the core dependencies of our application installed.
-
So that's gonna be tail and CSS, shodcm-view,
-
which is our view component library.
-
And then on top of that, since shodcm-view
-
puts the components directly inside of our project,
-
we'll go ahead and incorporate an automatic
-
component import and registration step
-
within our project flow so that we don't have to worry
-
about importing them every time that we wanna use a component.
-
So to start out with, I have a secondary tab
-
open up here for shodcm-view.
-
You can find the documentation at shodcm-view.com.
-
And you can find the installation instructions
-
that we'll be following by clicking getting started
-
and going to the install tab.
-
AdonisJS uses Vite, so we will be using
-
the Vite instruction steps.
-
And step one of their instructions has you create
-
a brand new project.
-
Well, we already have a project that we're working within,
-
so we're just gonna skip straight to step two,
-
which is getting tail and CSS installed.
-
So we can go ahead and give that command there a copy
-
and jump back into our terminal, stop our server,
-
clear that out, and paste that command in.
-
Awesome, so that installed a-okay.
-
We can go ahead and clear that out as well.
-
And next, we're gonna want to jump into our project.
-
So I'm gonna hide my browser away and jump back into here,
-
go into our Vite config.
-
We'll see a red squiggly just because all of this
-
is on one line.
-
If we give our project a save there,
-
and you have ESLint configured,
-
it will go ahead and run the fix for that
-
to add new lines for each of those.
-
What we need to do now is set up Tailwind
-
and AutoPrefixer, so we can do that by doing CSS,
-
providing an object inside of there.
-
Tailwind and AutoPrefixer are for post-CSS,
-
which we will be using and comes pre-installed with Vite.
-
So we can go ahead and specify a configuration
-
for that right here.
-
And specifically, we want to add them as plugins.
-
So we'll add a plugins array there as well.
-
We're going to want to use the Tailwind plugin
-
as well as the AutoPrefixer plugin there.
-
And you'll see that neither of those auto-imported for me.
-
So I'm gonna jump up to the top of my file
-
and import Tailwind from TailwindCSS
-
and import AutoPrefixer from AutoPrefixer.
-
Give that a save to fix our squigglies.
-
And there we go.
-
Out of the box, AdonisJS and its Inertia Starter Kit
-
started us with an Inertia plugin
-
that specified that we do want to use SSR,
-
the Vue plugin.
-
So if you're using Vue, that will be there,
-
and your traditional AdonisJS plugin
-
that comes with any AdonisJS project.
-
The resolve alias right down here
-
is going to allow us to import files
-
from the Inertia directory using a alias of tilde.
-
So for example, up here in this comment,
-
let's say we wanted to import something
-
from Inertia components header.
-
We would be able to do that in Vue via import header
-
from your string to the tilde to specify this alias slash.
-
And now we're already looking
-
inside of our Inertia directory.
-
So we would just need to do components/header.vue there
-
to import that file prefix that one example there as well.
-
As a heads up, if you are looking at the shodcm-vue,
-
if we scroll down a little bit,
-
they use an at character for their alias.
-
We're going to stick with a tilde.
-
The differentiation there doesn't really matter at all.
-
Either one will get the job done.
-
All right, let's hide that back away.
-
This resolve alias is also defined by default
-
inside of our Inertia TS config directory right here
-
with the paths under our compile options.
-
So if you do change that to say the at character instead,
-
you want to make that change here as well.
-
We're sticking with the defaults of the Inertia starter kit.
-
So we will leave those as is.
-
All right, so our V config should be all set up.
-
shodcm-vue comes with its own configuration step
-
that's going to alter some things inside of a project.
-
So we're going to want to jump inside of our CSS file
-
inside of our Inertia directory
-
and just go ahead and delete this out
-
because it's going to add one in for us automatically.
-
So we'll delete that there and move the trash for right now.
-
Once we've deleted that,
-
we can jump back inside of our terminal.
-
Make sure you're at the root of your application there.
-
And let's run shodcm-vue's configuration command,
-
mpx shodcm-vue at latest init.
-
We can hit enter to start this.
-
And it's going to walk us through some questions
-
to determine how we want it configured.
-
So we are using TypeScript here, so we'll hit yes for that.
-
Out of these options, we're using Vite,
-
so we will move forward with Vite there.
-
We'll go ahead and stick with just the default style.
-
This is really asking which flavor of gray
-
you would like to use with TailwindCSS.
-
I tend to stick with Slate, so I'll be going with that.
-
This is inconsequential,
-
so feel free to select whichever one you would prefer.
-
Then it's going to ask where our tsconfig file is located.
-
Now, this is going to be our Inertia tsconfig
-
because shodcm-vue is specific to our Vue application.
-
So we don't want to point it to our root tsconfig
-
like the default is here,
-
but instead to our Inertia tsconfig.
-
So we'll do ./inertia/tsconfig.json
-
to ensure that it is looking inside of our Inertia directory
-
for that tsconfig.
-
Then it's going to ask where our global CSS file is.
-
This is that file that we just deleted
-
out of our Inertia CSS directory.
-
So we can point it to Inertia CSS,
-
and that file is called app.css.
-
So we can hit enter there as well.
-
And it'll ask us whether or not we want to use CSS variables.
-
This will set up our Tailwind configuration
-
in a way where it will use CSS variables,
-
which I tend to prefer.
-
So I will hit yes here.
-
Then it's going to ask where we want
-
our Tailwind config to be located.
-
Default is a-okay there.
-
We can have that at the root of our application.
-
And here's an important distinction
-
that's going to ask us to configure our import alias.
-
Their default is using the @ character.
-
The Inertia starter kit uses a tilde instead.
-
So we'll overwrite this instead of using the @ character
-
with tilde/components there.
-
Same thing here for utilities, tilde/,
-
and we can put that at lib/utils,
-
sticking with their defaults there for everything
-
except for the @ character.
-
We're replacing that with a tilde.
-
Then lastly, we'll have a go ahead
-
and write everything that we've configured here
-
to a components.json file.
-
So we'll hit yes for that.
-
Then it's going to set all of this up for us.
-
And once it says success,
-
everything should be ready to go for us.
-
So in the background here,
-
in our side of our text editor,
-
we should see a couple of things got added in.
-
First, we now have a CSS file back inside of our application
-
with the same name that we were using originally.
-
So we don't need to change any of our configuration there.
-
With this, it's added the Tailwind directives,
-
as well as set it up in a way
-
where we use CSS variables for our colors.
-
And these are then passed into our Tailwind configuration.
-
And you can see it's also using layers here as well
-
to designate priority on certain things.
-
We now also have a components directory.
-
This is where it will install our shotCN components
-
as we install them individually.
-
It will put them inside of a subdirectory
-
inside of components called UI.
-
And we also now have a lib with utilities added in.
-
This is really just a single function of CN
-
that's just going to merge classes together.
-
I'm not sure if we actually ever make use of this,
-
but this is something that shotCN view uses internally
-
inside of the components as well.
-
Okay, so we can collapse those back down,
-
scroll down a little bit further,
-
and we should see in addition to those two files,
-
a components.json that just kind of holds
-
our shotCN configuration inside of it,
-
specifying that we are using TypeScript,
-
that we're using the default style,
-
where our TS config is, the Tailwind config,
-
what framework we're using, and the aliases there as well.
-
And then lastly, our Tailwind config,
-
which has now been added.
-
If you're using ESLint,
-
you can go ahead and give that a save
-
or replace all of the double quotes with single quotes.
-
And then you can see that it sets our theme up
-
and it extends our colors
-
so that we are using CSS variables for all of those.
-
And it also adds in their animate plugin there
-
that they use as well.
-
So you can tell by the red squigglies here
-
that we definitely want to change some things
-
inside of here, but most importantly,
-
we're going to want to make sure that our content is updated
-
because currently this thinks that we're working off
-
of the root of our project, which we are not.
-
All of our view-based stuff is going to be
-
specifically inside of our inertia directory.
-
So we want to update that accordingly.
-
We can also simplify their strings there
-
a little bit as well.
-
So we can do ./inertia,
-
have this consider the pages directory,
-
components directory, app, and layouts directory
-
inside of our inertia directory.
-
And then any sub folder and any sub file
-
inside of those folders, ending with TS, TSX, or view.
-
And that should account for most use cases here.
-
We can go ahead and update this to account
-
for our EdgeJS pages, should we add any as well.
-
So ./resources/views,
-
./.in any Edge file there.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!