Element+ your Vue 3 Application. Getting Started with Clean UI Framework

Source: Made with Vue JS

Hello my internet friends, hope your coding journey is going smoothly.

So, I was just browsing the internet and thinking of how should I design my personal portfolio website. I was looking for a sleek and beautiful UI library that should also support Vue 3 (Composition API of course). Then I found this awesome, handsome, beautiful, pretty library named Element Plus. I heard its name before but haven’t tried it. So, I thought it was a perfect way to try it, and let’s make a record that I and everyone can refer to in the near future.

So, without revolving around words, let’s get started.

There are two ways to use Element Plus, one is to add it to the existing Vue 3 project by setting up its configuration from scratch. Luckily I found the second one, which saved me a lot of time and it was a ready-made boilerplate. Yes, you heard it right.

You can also use this boilerplate if you want to use Vite in your project.

You can try how the boilerplate looks here. It saved me time to cook my lunch and hopefully will also be the same for you.

Just follow the instructions or modify them as I did.

Clone the repository in your desired folder.

git clone https://github.com/element-plus/element-plus-vite-starter
cd element-plus-vite-starter

Clean the repository to start with a completely new Git history

Below command will destroy the git repository so that you can create fresh commits from your name afterward.

rm -rf .git

Re-initialize as a git repository

git init
git add .
git commmit -m "chore: initialising repository and first commit"

Create a Repository on GitHub and link it to your local one.

Thankfully I use VS code, so I automated this step by logging into my GitHub account using VS code.

# Copy the Git Repo URL (Assuming you've already copied)
git remote add origin {YOUR_REPO_URL}
git push -u origin master

Install dependencies and Run the project

npm i
npm run dev

After setting the project up, you can change it according to your need, just follow the documentation and you can literally customize everything. That’s why I haven’t found any need to set up a project from scratch.

Pro tip: Just fork the above-mentioned repo to your GitHub, Create a project in GitHub named “Code Composables” and add this forked repo to that project. This will make your life a little bit easier.

We don’t have to always reinvent the wheel. Be smart, be fast, and be productive, otherwise, you’ll be replaced by someone, who has all of them.

Hope you liked this post, give a clap and write a comment if you can. If you want to become a better and more productive developer, follow me for more such content, and endless stories loading up just for you.

Thanks, guys, see you.!!