Project setup

In the first tutorial lesson, we'll learn to create a new Pruvious project. We'll also install a code formatter, Google fonts, and Tailwind CSS. Finally, we'll set up the base layout and some static components.

Creating a new project

Pruvious provides a CLI for installing a blank project. Execute this command in your terminal and follow the displayed instructions:

# Terminal

## pnpm
pnpm dlx pruvious@latest init <dir>

## npm
npx pruvious@latest init <dir>

We suggest using pnpm for faster execution compared to npm.

Once everything is installed, you can run the development server using the following command:

# Terminal

## pnpm
pnpm dev -o

## npm
npm run dev -o

A browser window will automatically open at http://localhost:3000. You can access the dashboard and create your admin account at http://localhost:3000/dashboard.

The first time you open the dashboard, it will prompt you to create the initial administrator account. After completing this step, we can create a dummy page to check if the root page still shows a 404 error.

Our page is functioning properly! Before we begin creating the initial components of our website, let's install a code formatter, integrate Google fonts, and incorporate Tailwind CSS to simplify our style writing process.

Prettier

A code formatter ensures consistent code appearance throughout the entire project. Feel free to customize everything in the following section to your preference since the choice and settings of the formatter are highly opinionated.

Prettier is my preferred code formatter. It has excellent plugins, such as:

To install Prettier and its plugins, run the command below:

# Terminal

## pnpm
pnpm add -D prettier prettier-plugin-organize-attributes prettier-plugin-tailwindcss

## npm
npm i -D prettier prettier-plugin-organize-attributes prettier-plugin-tailwindcss

Now, let's create a configuration file for Prettier. Here's an example of mine:

# prettier.config.js

export default {
  arrowParens: 'always',
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'ignore',
  printWidth: 120,
  quoteProps: 'consistent',
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
  plugins: ['prettier-plugin-organize-attributes', 'prettier-plugin-tailwindcss'],
  overrides: [
    {
      files: ['*.vue'],
      options: {
        attributeGroups: [
          '^v-(if|else-if|else)$',
          '^v-for$',
          '^v-',
          '^:(?!class$|style$)',
          '^@',
          '^(?!:?class$|:?style$)',
          '^class$',
          '^:class$',
          '^style$',
          '^:style$',
          '$DEFAULT',
        ],
        attributeSort: 'ASC',
      },
    },
  ],
}

If you use the Prettier - Code Formatter extension in Visual Studio Code, your code can automatically be formatted when you save a file. You can also create a custom script in your package.json file as follows:

# package.json

{
  "scripts": {
    "format": "prettier --write .",
    ...
  },
  ...
}

To format all the files in our project, we can use the commands pnpm format or npm run format. However, if we want to exclude our build files from being formatted, we can create a file called .prettierignore and include the following contents in it:

# .prettierignore

.cache
.nitro
.nuxt
.output
.pruvious
.uploads
node_modules
pnpm-lock.yaml

Google fonts

In our design, we use the following fonts:

Lato (regular) for copy text
Poppins (medium) for headlines

As both fonts are from Google, we can easily integrate them into our project using the @nuxtjs/google-fonts module. To install the module, run the following command:

# Terminal

## pnpm
pnpm add -D @nuxtjs/google-fonts

## npm
npm i -D @nuxtjs/google-fonts

Now, let's register the module in our nuxt.config.ts file and add the font names to its options.

# nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/google-fonts', 'pruvious'],
  googleFonts: {
    families: {
      Lato: {
        wght: [400, 700],
        ital: [400, 700],
      },
      Poppins: [500],
    },
  },
  pruvious: {
    jwt: {
      secretKey: '...',
    },
  },
})

I have added additional variations of our main font to allow content editors to utilize bold and italic text styles.

Tailwind CSS

Tailwind allows us to use classes instead of traditional CSS. To incorporate Tailwind into our project, we can use the @nuxtjs/tailwindcss module. Install it by running the following command:

# Terminal

## pnpm
pnpm add -D @nuxtjs/tailwindcss

## npm
npm i -D @nuxtjs/tailwindcss

Next, add it to our nuxt.config.ts file in the following manner:

# nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts', '@nuxtjs/tailwindcss', 'pruvious'],
  ...
})

To customize our Tailwind configuration and add global CSS, we need to create the tailwind.config.js file and an entry file. Use the following command to create the config file:

# Terminal

## pnpm
pnpm dlx tailwindcss init

## npm
npx tailwindcss init

Create an entry file in the assets/css directory and include the following content in it:

# assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Initial components

Now that we have set up everything, let's add some static components, like the page container, header, and footer which will appear on every page of our website. Let's start with the container:

# components/Container.vue

<template>
  <div class="mx-auto max-w-[73.75rem] px-12 tl:px-8 ph:px-6">
    <slot />
  </div>
</template>

We'll reuse the container in almost all other components because it's needed to wrap our content on the pages. For instance, we can use it to create a dummy footer:

# components/Footer.vue

<template>
  <Container>
    <footer>Footer</footer>
  </Container>
</template>

Next, we will create the components for our header, which include a logo, a navigation menu, and a dark mode switch. Once we have these components, we can add them to the Header.vue component.

# components/Logo.vue

<template>
  <svg fill="none" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M32.0608 35.9556C36.884 32.3041 40 26.5159 40 20C40 13.8167 37.194 8.28885 32.786 4.6202C33.8193 6.49511 34.336 8.57807 34.336 10.8691C34.336 13.6739 33.5312 16.2312 31.9215 18.541C30.3521 20.8096 27.9175 22.3564 24.6177 23.1813L32.0608 35.9556Z"
      fill="currentColor"
    />
    <path
      d="M5 6.77089C1.88818 10.2966 0 14.9278 0 20C0 25.0722 1.88818 29.7035 5 33.2291V6.77089Z"
      fill="currentColor"
    />
    <path
      d="M11.8813 38.2835C14.3623 39.3869 17.1096 40 20 40C22.0013 40 23.9339 39.7061 25.757 39.159L17.1328 23.8H11.8813V38.2835Z"
      fill="currentColor"
    />
    <path
      d="M19.4869 18.1698H11.8813V3.75397H19.4869C22.1026 3.75397 24.0543 4.3933 25.3421 5.67195C26.6298 6.90937 27.2736 8.64174 27.2736 10.8691C27.2736 13.0964 26.6097 14.87 25.2817 16.1899C23.994 17.5098 22.0624 18.1698 19.4869 18.1698Z"
      fill="currentColor"
    />
  </svg>
</template>

Let's add a placeholder to the navigation menu component:

# components/Menu.vue

<template>
  <nav>
    <ul>
      <li>Menu item</li>
    </ul>
  </nav>
</template>

Same for the dark mode switch:

# components/DarkModeSwitch.vue

<template>
  <button>Dark / Light mode</button>
</template>

Finally, our header will look like this:

# components/Header.vue

<template>
  <Container>
    <header class="flex items-center gap-6">
      <Logo />
      <Menu class="ml-auto" />
      <DarkModeSwitch />
    </header>
  </Container>
</template>

Let's combine everything in the default.vue layout:

# layouts/default.vue

<template>
  <Header class="mt-12" />

  <div class="my-23 space-y-23">
    <!-- Our page blocks will be rendered here -->
    <slot />
  </div>

  <Footer class="mb-23" />
</template>

To incorporate the custom fonts, Tailwind responsive utility variants (tp: and ph:) utilized in the components for tablet (portrait mode) and phone screens, and custom spacing, we need to include them in the tailwind.config.js file as follows:

# tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['blocks/**/*.vue'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Lato', ...defaultTheme.fontFamily.sans],
        heading: ['Poppins', ...defaultTheme.fontFamily.mono],
      },
      screens: {
        lp: { max: '1440px' },
        tl: { max: '1199px' },
        tp: { max: '1023px' },
        ph: { max: '767px' },
      },
      spacing: {
        23: '5.75rem',
      },
    },
  },
  plugins: [],
}

Here is an overview of our current progress:

Playground

You can access the current project files at the following link:

Explore the GitHub repository.

Last updated on September 24, 2024 at 13:55

Introduction

Portfolio block