Skip to content

Nuxt Frontend Documentation

Jump to bottom
Christine Nguyễn edited this page Sep 20, 2022 · 6 revisions

Technology Stack

Nuxt 3

  • Higher-level framework built on top of Vue to simplify the development of universal or single page Vue apps.
  • Faster page loading times
  • Improves SEO

Vue 3

JavaScript framework

Pinia

Vue store

DaisyUI

Component library plugin for Tailwind CSS

Tailwind

Utility-first CSS framework

Hero Icons

SVG icons

Vitest

Unit test framework powered by Vite

Codebase Structure

tailwind.config.ts

Content Configuration Configure all paths that use tailwind utilities in the content section of the config file, which should also include the HTML entry point if applicable.

Theme Configuration

Define the color palettes, background images, fonts, and more. Once configured, these color and background variables can be used throughout the application.

Currently, background images are configured using the images in assets/images/

Plugins

We are currently using DaisyUI to style components such as buttons.

Best Practices and Standards

Composition API

Using the Composition API enables: Improved organization of feature logic within a Vue component by grouping logic together in a setup function Create reusable functions called composables that can be injected into the setup function

In a Vue component file, the following ordering should be adopted:

<script></script>

<template></template>

<style></style>

Although I have listed style here, it is not recommended to include the <style></style> section for the following reasons:

  • Any custom css should live in assets/css/. We want to avoid writing custom css in a Vue file to promote clean and organized code.
  • CSS should live in a central place, not be dispersed across Vue files, making it hard to maintain and debug

Naming Conventions

components/base/

contains components that are reused throughout the application. These base components would be imported as . Good components are designed such that they can be reused in multiple scenarios, and developers do not have to know how they work internally before using them. More broadly, components should be open for extension, but closed for modification.

composables/

Composable files should be prefixed by use followed by the word that describes the purpose of the functions that live in the composable. For example:

composables/useValidation.ts This composable contains functions that we need to reuse to validate form fields.

TailwindCSS

assets/

contains any image and tailwind assets needed for the project. Custom base styles and classes for tailwind live in assets/css/tailwind.css

Building Layout Systems for UIs

Layouts are defined using either grids or flexbox. Typically, I choose to use grids when I know there needs to be a fixed number of columns. In other cases where I know elements need to be stacked on top of each other, I will use flexbox.

To help with building UI layouts, I use this interactive reference tool to recall flexbox properties and experiment with layouts.

Tailwind has good documentation for their grid utilities here: https://tailwindcss.com/docs/grid-template-columns

Clone this wiki locally