|
1 |
| -# Vue 3 + TypeScript + Vite |
| 1 | +<!-- <p align="center"> |
| 2 | + <img alt="Vuetify Logo" width="100" src="https://raw.githubusercontent.com/webdevnerdstuff/vuetify-inline-fields/main/src/assets/vuetify-logo.svg"> |
| 3 | +</p> --> |
2 | 4 |
|
3 |
| -This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
| 5 | +<p> |
| 6 | + <h1 align="center">Vuetify Inline Fields (alpha)</h1> |
| 7 | +</p> |
4 | 8 |
|
5 |
| -## Recommended IDE Setup |
| 9 | +<p align="center"> |
| 10 | + <!-- <a href="https://www.npmjs.com/package/vuetify-inline-fields"> |
| 11 | + <img src="https://img.shields.io/npm/v/vuetify-inline-fields?color=1867c0&logo=npm" alt="NPM Package"> |
| 12 | + </a> |
| 13 | + --> |
| 14 | + <a href="https://github.com/webdevnerdstuff/vuetify-inline-fields"> |
| 15 | + <img src="https://img.shields.io/badge/GitHub-WebDevNerdStuff-brightgreen.svg?logo=github" alt="@WebDevNerdStuff"> |
| 16 | + </a> |
| 17 | +</p> |
6 | 18 |
|
7 |
| -- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). |
8 | 19 |
|
9 |
| -## Type Support For `.vue` Imports in TS |
| 20 | +## Description |
10 | 21 |
|
11 |
| -TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. |
| 22 | +TBD |
12 | 23 |
|
13 |
| -If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: |
14 | 24 |
|
15 |
| -1. Disable the built-in TypeScript Extension |
16 |
| - 1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette |
17 |
| - 2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` |
18 |
| -2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. |
| 25 | +## Development Playground |
| 26 | + |
| 27 | +The `vuetify-inline-fields` is still a work in progress. If you would like to test the component library out, you can clone the repo and run the following commands: |
| 28 | + |
| 29 | +`pnpm i && pnpm play` |
| 30 | + |
| 31 | +This will open up a Playground page that loads the file `./src/playground/PlaygroundPage.vue`. You can edit this file to test out the component. |
| 32 | + |
| 33 | + |
| 34 | +## Installation |
| 35 | + |
| 36 | +Using [pnpm](https://pnpm.io/): |
| 37 | +``` |
| 38 | +pnpm add TBD |
| 39 | +``` |
| 40 | + |
| 41 | +Using npm: |
| 42 | +``` |
| 43 | +npm i TBD |
| 44 | +``` |
| 45 | + |
| 46 | +## Documentation |
| 47 | + |
| 48 | +Component is still in development. Documentation will be added once component is ready for production. |
| 49 | +<!-- [Documentation & Demo](https://webdevnerdstuff.github.io/vuetify-inline-fields/) --> |
| 50 | + |
| 51 | +## Dependencies |
| 52 | + |
| 53 | +[Vuetify v3](https://vuetifyjs.com/) |
| 54 | +[Vue 3](https://vuejs.org/) |
| 55 | +[VueUse](https://vueuse.org/) |
| 56 | + |
| 57 | + |
| 58 | +## Change Log |
| 59 | + |
| 60 | +[CHANGELOG](https://github.com/webdevnerdstuff/vuetify-inline-fields/blob/master/CHANGELOG.md) |
| 61 | + |
| 62 | + |
| 63 | +## License |
| 64 | + |
| 65 | +Copyright (c) 2023 WebDevNerdStuff |
| 66 | +Licensed under the [MIT license](https://github.com/webdevnerdstuff/vuetify-inline-fields/blob/master/LICENSE.md). |
| 67 | + |
| 68 | + |
| 69 | +## Legal |
| 70 | + |
| 71 | +Vuetify and the Vuetify logo are trademarks of Vuetify. This component was not created or endorsed by Vuetify. |
0 commit comments