https://github.com/meekb/vue3-feplayground

Vue 3 playground with Vite, Composition API, Vuetensils for Accessibility, Playwright for testing, and Histoire
https://github.com/meekb/vue3-feplayground

composition-api histoire pinia playwright vite vue3

Last synced: 20 days ago
JSON representation

Vue 3 playground with Vite, Composition API, Vuetensils for Accessibility, Playwright for testing, and Histoire

• Host: GitHub
• URL: https://github.com/meekb/vue3-feplayground
• Owner: Meekb
• Created: 2022-06-27T02:14:16.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-11T15:16:56.000Z (over 2 years ago)
• Last Synced: 2024-11-16T10:14:52.989Z (3 months ago)
• Topics: composition-api, histoire, pinia, playwright, vite, vue3
• Language: Vue
• Homepage:
• Size: 10.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue3-mini

A Vue 3 project with [Vite](https://vitejs.dev/), [Pinia](https://pinia.vuejs.org/), [Vutensils](https://vuetensils.com/), [Histoire](https://histoire.dev/), and [Playwright](https://playwright.dev/). This is currently my learning playground for FE technologies. 

Building out a mock site for a trucking transportation related org. Pinia is not being utilized yet.

## Components:

  

  * Hero made with [Hero Generator](https://hero-generator.netlify.app/)

  * Flashcard flips with CSS - plans to shift to a Pinia state

  * Menu uses Vuetensils VDrawer to manage attributes `aria-haspopup` and `aria-expanded`  

  * MenuLinks uses Vuetensils VBtn and a v-for to render `RouterLink` or `` according to data passed in

  * Service component wrapped in a `RouterLink` for navigation to service types

  * TextMotion with slot is animated each time the component enters the viewport (using Javascript)

  

## Current Views


  * Home path   `/`

  * About path    `/about`

  * Service path    `/services`

      * JIT path    `/services/just-in-time`

      * Heavy Haul & Flatbed path   `/services/special-equipment`

      * Reefer path    `/services/reefer`

## Project Setup

```sh

npm install

```

### Compile and Hot-Reload for Development

```sh

npm run dev

```

### Compile and Minify for Production

```sh

npm run build

```