Introduction
Recently I made the decision to build my own website because I wanted to a place to show off the projects I work on. I've tried building websites in the past and I usually gave up on the project after a few days due to indecision about the framework I wanted to use.
This time was going to be different. I've spent a lot of time writing in Javascript to learn about Discord's bot API so immediately that solidified my language choice for the backend. For the frontend framework, many web developers will know that there are so many options to choose from and ultimately I wanted something that I could get up and running quickly which lead me to Vue.js.
Planning
Website development can be challenging; however a lot of issues that developers might experience with a basic HTML, CSS & JS website can be resolved with the use of a frontend framework like Vue.js and some other accompanying tools.
My criteria for choosing a frontend framework was:
- Modularity - allowing me to split features into separate files
- Easy to read - I didn't want to make the code complicated to troubleshoot
- Versatile - I didn't know if I even needed a frontend framework so I wanted to be able to use as little or as much vue as I wanted.
Vue.js includes Single File Components which would let me split up parts of my website into different files making them easily manageable. Vue also utilises traditional HTML/CSS/JS structure making it easy to read and simply adds new v-function parameters to HTML tags like v-for to create a for loop.
<template>
<article v-for="(post, index) in posts" :key="post.id">
<time datetime="{{post.created_at}}">{{formatDate(post.created_at)}}</time>
<a :href=post.url>{{post.title}}</a>
<div>
<a v-for="author in post.authors" :key="author.id">{{author.name}}</a>
<span>Tags:</span>
<a v-for="tag in post.tags" :key="tag.id">{{tag.name}}</a>
</div>
</article>
</template>Additional Tools
In addition to the frontend framework, there are several other tools I've used in this project to make development a lot easier, starting with TailwindCSS. Tailwind provides a large library of CSS classes that make styling HTML elements very quick an easy.
Next is ViteJS which provides quick an easy frontend tooling, eliminating the need for Weback or Rollup, It allows me to quickly setup server-side rendering if I want to use it instead of client-side rendering and lastly it has simple commands for spinning up a quick development build of the site for testing and a proper build/serve function for pushing it to production.
Lastly, as part of TailwindCSS, I am also using PostCSS to make CSS feel a bit more modern and readable while adding some CSS error handling and vendor prefixes.
First Steps
To get started with your Vue project, you'll need some sort of development environment. Personally I am using WSL 2 running Ubuntu so I will be providing setup steps for this particular environment.
Install Node/NPM
Node Package Manager is required to install the tools required for your project and both NodeJS + NPM can easily be installed by running: (note this command does not use sudo)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
Initialise with Vite
Vite has a neat method of scaffolding your Vue project which will give you a small 'Hello World' app that you can use to experiment and understand Vue before getting started.
To setup the project, simply run npm init vite@latest in your terminal and follow the prompts to name your project (this will create a new folder in the current directory) and choose your framework (e.g. vue, react, svelte, etc).
Install TailwindCSS
Once your project has been setup and Vite's dependencies have been installed, you can install TailwindCSS, PostCSS and AutoPrefixer for easy and modern styling options.
In your terminal, run the following command:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Next initialise your config files with npx tailwindcss init -p which will generate tailwind.config.js and postcss.config.js.
I didn't personally make too many changes to these configuration files; however I would suggest adding './src/**/*.{html,vue,js,jsx,ts,css}' to Purge[] inside tailwind.config.js to remove the unused CSS styles. Lastly, I would add
mode: 'jit' to the config file to enable some additional features.
For more information on config files changes, I would reccommend reading the Tailwind docs.
Conclusion
By now you should have a simple Vue project setup with ViteJS and TailwindCSS installed. From here you may need to start digging into the docs for each tool to figure out what you can do wtih them and how to integrate them with your project.
Additionally, I have listed the GitHub repo for my website below so you can take a deep dive into how I have setup my project and used these tools to create the first website I am proud of.
Links
Website: https://gardnr.dev/
GitHub: https://github.com/Jay-Gardiner/gardnr-dev
Tailwind docs: https://tailwindcss.com/docs
VueJS docs: https://vuejs.org/v2/guide/ or https://vuejs.org/v2/cookbook/