-
Notifications
You must be signed in to change notification settings - Fork 16
Nuxt Frontend Documentation
- 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
JavaScript framework
Vue store
Component library plugin for Tailwind CSS
Utility-first CSS framework
SVG icons
Unit test framework powered by Vite
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.
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/
We are currently using DaisyUI to style components such as buttons.
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
contains components that are reused throughout the application. These base components would be imported as <base-button></base-button>. 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.
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.
contains any image and tailwind assets needed for the project. Custom base styles and classes for tailwind live in assets/css/tailwind.css
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
If a page is designed to have multiple columns or a more complex layout on desktops, I recommend using grids to define layouts and necessary breakpoints to shift the elements when the dimensions of the screen get smaller. Typically, I use devtools to test different screen sizes to ensure menus are showing/hiding properly and columns and rows are resizing themselves according to the screen size. You can also opt to use flexbox properties to optimize the UI for responsiveness; however, I have found that using grids is much more intuitive and gives me better results.
At the time when this is written, a responsive UI is important for the onboarding workflow. Users will still be required to play the actual game on a laptop.
https://tailwindcss.com/docs/responsive-design#customizing-breakpoints