WorkShop: How to Install Vue.js, Typescript , and Taildwind CSS

This workshop provides a step-by-step guide on installing and setting up Vue.js with TypeScript and Tailwind CSS for efficient and modern web development.

First of all, before you can install Vue.js you need to have node.js installed on your computer whit an up-to-date version. ⚠️

Here is the link if you don't have Node.js on your computer.

How to install Vue.js

The first step will be to open your terminal and enter this command:

npm create vue@latest

You should see this on your screen:

After pressing enter, you should see this:

Here, you can name your project. We will name it "WorkShopVue.js".

There will be multiple prompts. We will say "No" to all of them, including Typescript, which we will set up ourselves. 😉 It should loot like this:

Don't forget to be in your directory for your npm install cd "WorkShopVue.js"

Now run npm install

When it's done, you can run npm run dev

Now, you should see your localhost adress, which you can now copy and paste into your browser's address bar.

Congratulation, you did it ! 👑 (You should see this)

We can go now to the next step. 👇

How to implement Typescript

You can use two lines of code to install TypeScript. (We will use the first one)

The first one is to run in your project directory:

npm install typescript --save-dev

The second one installs TypeScript globaly:

npm install -g typescript

See, that was easy! 😁

We can now move to the next step. 👇

How to implement Taildwind

First, install Tailwind CSS, PostCSS, and Autoprefixer by running:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Next, generate the tailwind.config.js and postcss.config.js files by running:

npx tailwindcss init -p

And that's it, it's time to launch your IDE and open the project.

Bonus how to implement headless WordPress with Vue.js

Let's go!

Exercice

For those who are interested, here’s a little exercise where I ask you to reproduce what is shown in the images below.