https://github.com/alvarosabu/vue3-mainnavigation-keyboard-example
Quick example how to use Composition API + Vueuse to improve the accessibility of your main navigation menus.
https://github.com/alvarosabu/vue3-mainnavigation-keyboard-example
Last synced: 3 months ago
JSON representation
Quick example how to use Composition API + Vueuse to improve the accessibility of your main navigation menus.
- Host: GitHub
- URL: https://github.com/alvarosabu/vue3-mainnavigation-keyboard-example
- Owner: alvarosabu
- License: mit
- Created: 2021-06-25T12:51:38.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-29T09:40:04.000Z (over 4 years ago)
- Last Synced: 2025-04-06T19:32:11.688Z (6 months ago)
- Language: Vue
- Size: 299 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Logo created with Windcss logo + Icons made by Vectors Market & Pixel perfect from www.flaticon.com
# Vitesome 🌬 ⛵️
> A simple opinionated Vue3 Starter Template with [Vite.js](https://vitejs.dev/)
This template should help get you started developing with Vue 3 and Typescript in Vite in a bliss.
## Features
- [Vite](https://github.com/vitejs/vite) ⚡️, [Vue 3](https://github.com/vuejs/vue-next),
- 💨 [Windi CSS](https://github.com/windicss/windicss)
- 📦 [Components auto importing](./src/components)
- [i18n](https://github.com/intlify/vue-i18n-next) out of the box 👩🎨
- Easy to use svg icons based on [Iconify](https://iconify.design) 🔝
- Routing with [Vue Router 4](https://github.com/vuejs/vue-router-next)
- Deploy on Netlify
## Pre-📦
This repo brings few things pre-packed, so you don't need to install them manually everytime.
### Styling
- [Windi CSS](https://github.com/windicss/windicss) with [`vite-plugin-windicss`](https://github.com/windicss/vite-plugin-windicss)
- Default [Google Fonts](https://github.com/stafyniaksacha/vite-plugin-fonts#readme) with `vite-plugin-fonts`
### Icons
- [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)
- [PurgeIcons](https://github.com/antfu/purge-icons) with [`vite-plugin-purge-icons](vite-plugin-purge-icons) Think about TailwindCSS + PurgeCSS, but for Icons.
- Custom icons below `./assets/icons` with
### Plugins
- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs
- [Vue I18n](https://github.com/intlify/vue-i18n-next) - Internationalization
- Component auto-import with [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components)
### Dev tools
- [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) - All in one i18n support
- [Windi CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - IDE support for Windi CSS
- [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Icon inline display and autocomplete
### Project setup
```
yarn
```
### Use it
```
yarn dev
```
This will serve the app at [http://localhost:3260](http://localhost:3260)
### Build it
```
yarn build
```
Builds the app for production to the `dist` folder.
It correctly bundles Vue in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about [deployment](#deployment) for more information.
### Deployment
Visit [Netlify](https://app.netlify.com/start) and select your repo, select OK along the way, and your App will be live in a minute.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
### If Using ``
[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).
## Type Support For `.vue` Imports in TS
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:
### If Using Vetur
1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
3. Open `src/main.ts` in VSCode
4. Open the VSCode command palette
5. Search and run "Select TypeScript version" -> "Use workspace version"
