Crafting my Portfolio - Preparing Base
Tags: vue, nuxt, tailwindcss, portfolio
Published: 2022-10-15 20:29:16

> This is a Series of Posts where I'm sharing my journey(sort of) while i craft my Portfolio.

I've been a fan of Vue and Nuxt ever since I first found out about it thanks to [dev.to](https://dev.to). To me, a JS allergic person, it was the sanest framework ever in my personal opinion and I still think so. The reason was simple enough, the syntax is easily understandable. Like, even if I show some Vue code to a newbie dev, they'll instantly understand it. The next day, the first thing I did was open [MDN](https://developer.mozilla.org/en-US/) and started learning JS (which I still haven't finished learning even half since last 2 years)

<img width="100%" height="100%" src="https://media.tenor.com/1OYYI7xS5YUAAAAd/awkward-stare.gif" />

_ahem_.. anyway, time to start the post.

---

## Deciding Stack
So it is already clear I'll Nuxt. Although the current stable release is version 2 and version 3 is still in RC status, I'll still use version 3.

### CSS Framework
I'm a huge fan of [MDB](https://mdbootstrap.com). Bootstrap + Material Design, what else can one ask for. Instantly beautiful sites with least effort. But this time I'll be using [Tailwind CSS](https://tailwindcss.com). Reason? I just feel like it, and also 'cuz of [Daisy UI](https://daisyui.com). I absolutely love how it reduces the amount of classes needed to design stuff. Since it's a Component library for Tailwind, it can also use normal Tailwind classes.

![Daisy UI showcasing classes needed to create a Toggle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfyg5225emqxy7lszz66.png)

In addition, I also decided to use [tailwind typography plugin](https://tailwindcss.com/docs/typography-plugin). As it adds some default style for Typography and Daisy UI also recommended it.

### Fonts
For fonts, ofcourse... I decided to use something fancy. I decided to use:
- [Mansalva](https://fonts.google.com/specimen/Mansalva) as Sans Font.
- [Nanum Pen Script](https://fonts.google.com/specimen/Nanum+Pen+Script) as Serif Font.
- [Fira Code](https://fonts.google.com/specimen/Fira+Code) as Mono Font.

Quite a pairing, right? I know.

## Setting Up
Finaly time to start with the Setup. I'll first setup an empty projecy using [nuxi](https://v3.nuxtjs.org/api/commands/add/) then I'll start adding modules needed one by one. 

### 1. Initialize Project
Following the [Docs](https://v3.nuxtjs.org/getting-started/installation), first I'll use 

```zsh
npx nuxi init portfolio
```
'portfolio' being the name of my project. Next cd into the directory created

```zsh
cd portfolio
```
And finally download the Depden... Dependec... Deps

```zsh
yarn install
```

![Running Setup commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38wfc3s82wefswfm1w94.png)

This will provide me a directory tree like this

![Directory Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsikkzc9nralos5wbdzr.png)

### 2. Add Modules
#### > Tailwind CSS
First, I'll start by adding Tailwind CSS. Luckily, there is a Nuxt module for it and it also supports Nuxt 3, which means less work for me. Following [Nuxt Tailwind Docs](https://tailwindcss.nuxtjs.org/getting-started/setup), I'll first install Tailwind module with

```zsh
yarn add --dev @nuxtjs/tailwindcss
```
Next I'll add it into modules section of `nuxt.config.ts` and   `tailwindcss` property

```ts
....
modules: ['@nuxtjs/tailwindcss']

// tailwind
tailwindcss: {},
....
```

![Tailwincss in nuxt config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q0yj0fe42ixik1ubly0.png)

Next, I'll generate the base `tailwind.config.js` file with

```zsh
npx tailwindcss init
```
This will generate me an empty config file

![Empty Tailwind config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrtwqao4p7ukfi1yp1a0.png)

Although the Tailwind module for Nuxt automatically handle adding a base CSS file, I'll still add it or else the VS Code extension for tailwind won't work. I'll name it `tailwind.css` and add it in `assets/css/tailwind.css`

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

![Base tailwind css file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhdxhg4htwa8rgf24inm.png)

#### > Daisy UI and Typography plugin
Time to add Daisy UI. From its [Docs](https://daisyui.com/docs/install/), first I'll add it in deps. Also, I'll be adding all modules as 'dev' to see what will happen when the project is moved into production.

```zsh
yarn add --dev daisyui
```
Next we add it in 'plugins' array in `tailwind.config.js`

```js
....
plugins: [require("daisyui")],
....
```

I'll also install Tailwind Typography plugin

```zsh
yarn add --dev @tailwindcss/typography
```
 Now into the `tailwind.config.js` it goes. It must be before Daisy UI.

```js
....plugins: [require('@tailwindcss/typography'), require('daisyui')],
....
```
Now `tailwind.config.js` looks like this

![Tailwind config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26pdriyvf60whf8isrw9.png)

#### > Theme Change
Daisy UI comes with multiple themes, and I want to be able to toggle between themes by toggling a button. As per Daisy UI Docs, it is recommended to use [Theme Change](url) package to help to easily toggle themes and also stores theme preference in Local Storage.

```zsh
yarn add --dev theme-change
```
#### > Google Fonts
I also need to load my Fancy Font pairing in my Portfolio. We could just load font files... or we could install one more package to manage it for us. (Yeah, I know the build size will increase, and I honestly don't care about it) And luckily there is a [Nuxt module](https://google-fonts.nuxtjs.org) that is also compatible with Nuxt 3.

Install it

```zsh
yarn add --dev @nuxtjs/google-fonts
```

Add it in modules in `nuxt.config.ts`

```ts
....
modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts'],
....
```

This concludes Installation.

### 3. Configuration
Time to configure all the packages I installed previously. First, I'll configure daisy UI. It by default comes with few themes and came to like its 'Pastel' and 'Dracula' themes, and I'll be using them as themes for Light and Dark mode respectively.


![List of Themes in Daisy UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54zqib036ac0h01t4un7.png)

To tell Daisy UI to only include those 2 themes in my build, I'll add the following the theme names in the `themes` array (or whatever it might be called) in `tailwind.config.js`. I'll also be telling it what dark theme I'll be using.

```js
....
// daisyUI config
daisyui: {
  themes: ['pastel', 'dracula'],
  darkTheme: 'dracula',
},
....
```

Next I'll add my fonts into the Project. For that I'll add some configurations for handling fonts and font families in `nuxt.config.ts` which are documented [here](https://google-fonts.nuxtjs.org). I'll also import the types at top. (Pardon if I'm using wrong method for importing types, I'm new to TS)

```ts
import GoogleFontsModule from '@nuxtjs/google-fonts'; // for types

....
// @nuxtjs/google-fonts: https://google-fonts.nuxtjs.org/setup
googleFonts: {
  display: 'swap',
  download: true,
  overwriting: false,
  inject: true,
  families: {
    Mansalva: true,
    'Nanum Pen Script': true,
    'Fira Code': true,
  },
},
....
```

Next I'll tell Tailwind about my fonts and update its default Sans, Serif and Mono font families.

```js
....
theme: {
  extend: {},
  fontFamily: {
    sans: ['Mansalva', 'cursive'],
    serif: ['"Nanum Pen Script"', 'cursive'],
    mono: ['"Fira Code"', 'monospace'],
  },
},
....
```
This is how my `nuxt.config.ts` and `tailwind.config.js` files look like now.

![nuxt config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odrmmufurj8nd1in4ybs.png)

![Tailwind Config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpkqaettnv27d0ymzu76.png)

## Demo Component
As a tradition, we usually create a Hello World Program when we start out. In similar manner, I'll create a Component to test if everything is working correctly or not.

I'll use `nuxi` to create a new Component named 'HelloDaisyUi'. It will create a component folder and my component file in it as well with some boiler code.

```zsh
npx nuxi add component HelloDaisyUI
```

![HelloDaisyUi component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1i2ymsns6acx86wsfepr.png)

Now for this Component, I'll add a centered Card with a Title, some text, Two Buttons and a toggle for toggling themes. First the Card

```vue
<script lang="ts" setup></script>

<template>
  <div class="container mx-auto">
    <section
      class="flex flex-col justify-center items-center h-screen px-2 gap-6"
    >
      <div class="card bg-base-100 shadow-xl border border-accent">
        <div class="card-body">
          <h2 class="card-title text-2xl">Hello Daisy UI</h2>
          <p class="font-serif text-2xl">Hello and Welcome.</p>
          <p class="font-serif text-2xl">
            This a mix of Tailwind with Daisy UI. Ain't it
            <span class="font-bold">Awesome?</span>
          </p>
          <div class="card-actions justify-end">
            <button class="btn btn-primary">Yes</button>
            <button class="btn btn-danger">Yesss!</button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped></style>
```

This will result into this UI. As expected, everything is working normal and the light theme and Fonts working as well.

![UI for Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uflhy5gi5nxurporek9j.png)

Next, I'll add some markup for theme toggle. Looking at Daisy UI docs, I'll use [Swap](https://daisyui.com/components/swap/) with button to implement the toggle component.

```vue
....
<div class="text-center">
  <p class="text-xl pb-3">Try swapping Themes</p>
  <button class="btn btn-circle swap swap-rotate">
    <!-- sun icon -->
    <svg
      class="swap-off fill-current w-10 h-10"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
      />
    </svg>

    <!-- moon icon -->
    <svg
      class="swap-on fill-current w-10 h-10"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path
        d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
      />
    </svg>
  </button>
</div>
....
```

The code will result in this UI.

![Theme Toggle UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/taizpk2uvxlqnt8o9kmy.png)

Now time to implement theme toggling. Consulting [docs](https://github.com/saadeghi/theme-change), I'll use the toggle method, well of course after all I just have 2 themes. 

In the `script` tag of the component, first I'll import 'theme change' then when the component is mounted, I'll initialize and also add the data attributes to my button to toggle the theme. Also using the vue magic and the `data-act-class=""` attribute, I'll make it handle the state of swap on it's own. Basically this attribute add a class when the theme toggle is in active state.

```vue
<script lang="ts" setup>
import { themeChange } from 'theme-change';

onMounted(() => {
  themeChange(false);
});
</script>
....
<button
  class="btn btn-circle swap swap-rotate"
  data-toggle-theme="pastel,dracula"
  data-act-class="swap-active"
>
....
</button>
....
```

The code will result in following behaviour.

![HelloDaisyUi gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os7ls6tptjwsarz1z3px.gif)

<img height="100%" width="100%" src="https://media.tenor.com/SfIBJjbHH9UAAAAC/dog-smile-shyboos.gif" />

HAA EZZZZ Dark Theme setup for my Portfolio. And this Concludes the Base Setup Part. See ya in next part. 

---
Cover Credits: [Artem Maltsev](https://unsplash.com/photos/3n7DdlkMfEg)

---