Skip to content

Commit c315d51

Browse files
AlansCodeLogAlansCodeLog
committed
fix: improved nuxt & nuxt+tailwind integration
1 parent 7de005b commit c315d51

File tree

4 files changed

+101
-47
lines changed

4 files changed

+101
-47
lines changed

‎README.md‎

Lines changed: 57 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,28 @@ Custom vue component library.
77

88
# [Storybook](https://alanscodelog.github.io/vue-components/storybook)
99

10-
# Development
10+
# Usage with Nuxt
1111

12-
`src/main.ts` is a playground for testing things and will work with the `dev` script which will serve a vite server in dev mode.
12+
Everything can just be done from the config. Nuxt will automatically import the component types. The module also automatically registers it's tailwind config and provides the necessary colors to the tailwind theme viewer for use with `@nuxtjs/tailwindcss`, be sure to install it as a peer dependency.
1313

14-
`scr/main.lib.ts` is the actual library export which is used when vite builds in production mode.
14+
```ts
15+
modules: [
16+
[
17+
"@alanscodelog/vue-components/nuxt",
18+
"@nuxtjs/tailwindcss",
19+
],
20+
],
21+
vite: {
22+
vue: {
23+
script: {
24+
defineModel: true,
25+
},
26+
}
27+
}
1528

29+
```
1630

17-
## Usage with Vite
31+
# Usage with Vite
1832

1933
In `main.ts` or where vue is mounted:
2034

@@ -51,24 +65,46 @@ In the vite config, vue will require the experimental useModel:
5165
}),
5266
],
5367
```
68+
## Setting up Tailwind
5469

55-
<!-- TODO test -->
5670
You should also be able to use tailwind directly instead of importing the styles.
5771

58-
The package provides a plugin `@alanscodelog/vue-components/tailwind/plugin.js` that can be used with tailwind. It should then be configured similar to the library's config.
72+
You can use the exported config and merge it with your own if needed.
73+
74+
```ts
75+
import componentsconfig from "@alanscodelog/vue-components/tailwind.config.ts"
76+
import { theme } from "./lib/general/theme.js"
77+
78+
export default {
79+
...componentsConfig,
80+
// ... your config
81+
plugins: [
82+
// ...your plugins
83+
...componentsConfig.plugins
84+
]
85+
}
86+
87+
```
88+
89+
If you need to setup the config completely from scratch the package provides a plugin `@alanscodelog/vue-components/tailwind/plugin.js` that sets up a few utility classes. It also requires setting up the theming library. The options it uses are exported for easy re-use.
5990

6091
```ts
6192
import { createTailwindPlugin } from "metamorphosis/tailwind"
62-
import {libraryPlugin} from "@alanscodelog/vue-components/tailwind/plugin.js"
63-
import {themePluginOpts} from "@alanscodelog/vue-components/tailwind/themePluginOpts.js"
93+
// you can also use your own metamorphosis theme so long as the necessary colors are provided ( warning/ok/danger/accent, neutral is also used, but that is already provided by tailwind )
94+
import { theme } from "@alanscodelog/vue-components/theme.js"
95+
import { libraryPlugin } from "@alanscodelog/vue-components/tailwind/plugin.js"
96+
import { themePluginOpts } from "@alanscodelog/vue-components/tailwind/themePluginOpts.js"
97+
import componentsconfig from "@alanscodelog/vue-components/tailwind.config.ts"
98+
6499
const config = {
65100
darkMode: "class",
66101
plugins: [
67102
// integration with my theme library
68-
// alternatively provide the colors warning/ok/danger/accent (neutral is also used, but that is already provided by tailwind)
69103
createTailwindPlugin(theme, themePluginOpts),
70104
libraryPlugin,
105+
// .... your plugins
71106
],
107+
// ... your opts
72108
} satisfies Config
73109

74110
export default config
@@ -77,11 +113,18 @@ export default config
77113

78114
You will need to import `@alanscodelog/vue-components/utilities.css` and optionally `@alanscodelog/vue-components/base.css` in your css file.
79115

116+
```css
117+
@import "@alanscodelog/vue-components/base.css";
118+
@import "@alanscodelog/vue-components/utilities.css";
119+
@tailwind base;
120+
@tailwind components;
121+
@tailwind utilities;
122+
```
123+
80124
Utilities contains required utilities.
81125

82126
Base just contains some basic styles for vue's animations.
83127

84-
85128
## Getting Globally Registered Component Types
86129

87130
To get global typings, in a global declaration file (e.g. global.d.ts) do:
@@ -91,24 +134,10 @@ declare module "@vue/runtime-core" {
91134
export interface GlobalComponents extends GlobalComponentTypes { }
92135
}
93136
```
94-
## Usage with Nuxt
95137

96-
Everything can just be done from the config. Nuxt will automatically import the component types.
97138

98-
```ts
99-
css: [
100-
// required to get the component styles working
101-
"@alanscodelog/vue-components/styles.css",
102-
],
103-
modules: [
104-
["@alanscodelog/vue-components/nuxt"],
105-
],
106-
vite: {
107-
vue: {
108-
script: {
109-
defineModel: true,
110-
},
111-
}
112-
}
139+
# Development
113140

114-
```
141+
`src/main.ts` is a playground for testing things and will work with the `dev` script which will serve a vite server in dev mode.
142+
143+
`scr/main.lib.ts` is the actual library export which is used when vite builds in production mode.

‎nuxt.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎nuxt.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { type DeepPartial } from "@alanscodelog/utils"
2+
import { defineNuxtModule } from "@nuxt/kit"
3+
import { type Config } from "tailwindcss"
4+
import { fileURLToPath } from "url"
5+
6+
import { theme } from "./src/theme.js"
7+
import config from "./tailwind.config.js"
8+
9+
10+
export default defineNuxtModule({
11+
meta: {
12+
name: "@alanscodelog/vue-components",
13+
},
14+
setup(_opts, nuxt) {
15+
nuxt.hook("components:dirs", dirs => {
16+
dirs.push({
17+
path: fileURLToPath(new URL("./src/components/", import.meta.url)),
18+
prefix: "",
19+
})
20+
})
21+
nuxt.hook("tailwindcss:config" as any, (twConfig: DeepPartial<Config>) => {
22+
twConfig.plugins = [...(twConfig.plugins ?? []), ...config.plugins]
23+
twConfig.darkMode = "class"
24+
twConfig.theme ??= {}
25+
twConfig.theme.configViewer = {
26+
// https://github.com/rogden/tailwind-config-viewer/issues/84
27+
themeReplacements: Object.fromEntries(
28+
Object.entries(theme.css)
29+
.map(([key, value]) => [`rgb(var(${key}) / <alpha-value>)`, `rgb(${value})`]),
30+
),
31+
}
32+
return twConfig
33+
})
34+
},
35+
})

‎package.json‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@
5252
"@fortawesome/free-brands-svg-icons": "^6.4.0",
5353
"@fortawesome/free-regular-svg-icons": "^6.4.0",
5454
"@fortawesome/free-solid-svg-icons": "^6.4.0",
55-
"vue": "^3.2.47"
55+
"vue": "^3.2.47",
56+
"@nuxtjs/tailwindcss": "^6.7.0"
5657
},
5758
"peerDependenciesMeta": {
5859
"@fortawesome/free-solid-svg-icons": {
@@ -63,15 +64,18 @@
6364
},
6465
"@fortawesome/free-brands-svg-icons": {
6566
"optional": true
67+
},
68+
"@nuxtjs/tailwindcss" : {
69+
"optional": true
6670
}
6771
},
6872
"dependencies": {
6973
"@alanscodelog/utils": "^4.0.0-beta.4",
7074
"@fortawesome/vue-fontawesome": "^3.0.3",
75+
"colord": "^2.9.3",
7176
"colorjs.io": "^0.4.3",
7277
"metamorphosis": "github:alanscodelog/metamorphosis",
73-
"tailwind-merge": "^1.12.0",
74-
"colord": "^2.9.3"
78+
"tailwind-merge": "^1.12.0"
7579
},
7680
"devDependencies": {
7781
"@alanscodelog/commitlint-config": "^2.0.0",
@@ -83,6 +87,7 @@
8387
"@fortawesome/free-solid-svg-icons": "^6.4.0",
8488
"@fortawesome/vue-fontawesome": "^3.0.3",
8589
"@nuxt/kit": "^3.5.1",
90+
"@nuxtjs/tailwindcss": "^6.7.0",
8691
"@rollup/plugin-node-resolve": "^15.0.2",
8792
"@storybook/addon-a11y": "7.0.13",
8893
"@storybook/addon-actions": "7.0.13",
@@ -141,7 +146,7 @@
141146
"files": [
142147
"src",
143148
"dist",
144-
"nuxt.js",
149+
"nuxt.ts",
145150
"tailwind.config.ts",
146151
"tailwind-vscode.config.ts"
147152
],

0 commit comments

Comments
 (0)