@code-coaching/vuetiful 0.0.4 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -133
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,143 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
# Vuetiful
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A Vite based Vue3 component library - utilizing TailwindCSS.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
TailwindCSS is added as a dependency in the consuming app, but is not mandatory to use.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
# Compatability
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
- Vite based Vue3 apps
|
|
10
|
+
- Vite based Quasar apps
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
# Features
|
|
12
13
|
|
|
13
|
-
|
|
14
|
+
- [x] Themes
|
|
15
|
+
- [x] Dark Mode
|
|
16
|
+
- ... more to come
|
|
14
17
|
|
|
15
|
-
|
|
16
|
-
# install dependencies
|
|
17
|
-
npm install
|
|
18
|
+
# Docs
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
npm run docs:dev
|
|
20
|
+
[Vuetiful Docs](https://vuetiful.dev)
|
|
21
21
|
|
|
22
|
-
#
|
|
23
|
-
npm run build
|
|
22
|
+
# Credits
|
|
24
23
|
|
|
25
|
-
|
|
26
|
-
npm run docs:build
|
|
27
|
-
|
|
28
|
-
# preview the doc app locally from docs/.vitepress/dist
|
|
29
|
-
npm run docs:serve
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
You may use [Netlify](https://www.netlify.com/) to auto build and deloy the doc app like this project does.
|
|
33
|
-
|
|
34
|
-
## Develop and test locally
|
|
35
|
-
|
|
36
|
-
The best way to develop and test your component is by creating demos in `docs/components/demo` folder, as shown by the example components.
|
|
37
|
-
|
|
38
|
-
If you want to test the library in your Vue3 app locally:
|
|
39
|
-
|
|
40
|
-
- In the root folder of this library, run `npm link`. This will create a symbolic link to the library.
|
|
41
|
-
- In the root folder of your client app, run `npm link vuetiful`. This will add the symbolic link to the `node_modules` folder in your client app.
|
|
42
|
-
- You can now import `vuetiful` in your client app.
|
|
43
|
-
|
|
44
|
-
There is no need to add `vuetiful` to your client app's dependency in this case.
|
|
45
|
-
|
|
46
|
-
If you made changes to the library, you will need to rebuild the library. Your Vue3 app shall hot reload when the building of library is completed.
|
|
47
|
-
|
|
48
|
-
## How it works
|
|
49
|
-
|
|
50
|
-
### Components
|
|
51
|
-
|
|
52
|
-
The library is a [Vue plugin](https://v3.vuejs.org/guide/plugins.html). The `install` function in [index.ts](src/index.ts) registers all components under [components](src/components) to Vue globably.
|
|
53
|
-
|
|
54
|
-
The components are also exported by [index.ts](src/index.ts) so that the client app can import them individually and register them locally, instead of using the library as a plugin. This may be a better option if the client app only use a small set of components in your library.
|
|
55
|
-
|
|
56
|
-
### Utilities and constants
|
|
57
|
-
|
|
58
|
-
The library includes example utilities and constants. They are also exported in [index.ts](src/index.ts). The client app may use them as below:
|
|
59
|
-
|
|
60
|
-
```js
|
|
61
|
-
<script lang="ts">
|
|
62
|
-
import { MyConstants, MyUtil } from 'vuetiful'
|
|
63
|
-
|
|
64
|
-
export default {
|
|
65
|
-
data () {
|
|
66
|
-
return {
|
|
67
|
-
magicNum: MyConstants.MAGIC_NUM
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
methods: {
|
|
71
|
-
add (a:number, b:number) {
|
|
72
|
-
return MyUtil.add(a, b)
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
</script>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### Styling
|
|
80
|
-
|
|
81
|
-
Individual compopnent may have styles defined in its `.vue` file. They will be processed, combined and minified into `dist/style.css`, which is included in the `exports` list in [package.json](package.json).
|
|
82
|
-
|
|
83
|
-
If you have library level styles shared by all components in the library, you may add them to [src/assets/main.css](src/assets/main.css). This file is imported in [index.ts](src/index.ts), therefore the processed styles are also included into `dist/style.css`. To avoid conflicting with other global styles, consider pre-fixing the class names or wrapping them into a namespace class.
|
|
84
|
-
|
|
85
|
-
If you have your own special set of SVG icons, you may create a font file (`.woff` format) using tools like [Icomoon](https://icomoon.io/) or [Fontello](https://fontello.com/). This starter includes an example font file [src/assets/fonts/myfont.woff](src/assets/fonts/myfont.woff) and references it in [src/assets/main.css](src/assets/main.css), with utility icon CSS classes. An icon from the font file is used in Component A. Vite will include the font file into the build, see [https://vitejs.dev/guide/assets.html](https://vitejs.dev/guide/assets.html).
|
|
86
|
-
|
|
87
|
-
The client app shall import `style.css`, usually in the entry file:
|
|
88
|
-
|
|
89
|
-
```js
|
|
90
|
-
import "vuetiful/dist/style.css";
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
### Third-party dependencies
|
|
94
|
-
|
|
95
|
-
Third-party libraries used by you library may bloat up the size of your library, if you simply add them to the `dependencies` in [package.json](package.json).
|
|
96
|
-
|
|
97
|
-
The following are some strategies to reduce the size of your library:
|
|
98
|
-
|
|
99
|
-
### Type generation
|
|
100
|
-
|
|
101
|
-
In [tsconfig.json](tsconfig.json), the following options instructs `tsc` to emit declaration (`.d.ts` files) only, as `vite build` handles the `.js` file generation. The generated `.d.ts` files are sent to `dist/types` folder.
|
|
102
|
-
|
|
103
|
-
```json
|
|
104
|
-
"compilerOptions": {
|
|
105
|
-
"declaration": true,
|
|
106
|
-
"emitDeclarationOnly": true,
|
|
107
|
-
"declarationDir": "./dist/types"
|
|
108
|
-
}
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
In [package.json](package.json), the line below locates the generated types for library client.
|
|
112
|
-
|
|
113
|
-
```json
|
|
114
|
-
"types": "./dist/types/index.d.ts",
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
> In [vite.config.ts](vite.config.ts), `build.emptyOutDir` is set to `false` and `rimraf` is used instead to remove the `dist` folder before the build. This is to avoid the `dist/types` folder generated by `tsc` being deleted when running `vite build`.
|
|
118
|
-
|
|
119
|
-
### Configuration
|
|
120
|
-
|
|
121
|
-
#### TypeScript
|
|
122
|
-
|
|
123
|
-
In [tsconfig.json](tsconfig.js), set the following as recommended by Vite (since esbuild is used). However, enableing this option leads to https://github.com/vitejs/vite/issues/5814. The workaround is to also enable `compilerOptions.skipLibCheck`.
|
|
124
|
-
|
|
125
|
-
```json
|
|
126
|
-
"compilerOptions": {
|
|
127
|
-
"isolatedModules": true
|
|
128
|
-
}
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
In [tsconfig.json](tsconfig.js), set the following to address [Issue #32](https://github.com/wuruoyun/vue-component-lib-starter/issues/32). The solution is from https://github.com/johnsoncodehk/volar/discussions/592.
|
|
132
|
-
|
|
133
|
-
```json
|
|
134
|
-
"compilerOptions": {
|
|
135
|
-
"types": [
|
|
136
|
-
"vite/client"
|
|
137
|
-
]
|
|
138
|
-
}
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
#### Dependencies
|
|
142
|
-
|
|
143
|
-
In [package.json](package.json), Vue and PrimeVue are declared in both `peerDependencies` and `devDependencies`. The former requires the client app to add these dependencies, and the later makes it easier to setup this library by simply running `npm install`.
|
|
24
|
+
Inspiration for this project comes from [Skeleton](https://skeleton.dev) - a UI Toolkit for SvelteKit. If you are looking for a SvelteKit UI Toolkit, I highly recommend it.
|