@pikacss/nuxt-pikacss 0.0.39 → 0.0.41
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/package.json +2 -2
- package/README.md +0 -144
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pikacss/nuxt-pikacss",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.41",
|
|
5
5
|
"author": "DevilTea <ch19980814@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@nuxt/kit": "^4.2.2",
|
|
45
45
|
"pathe": "^2.0.3",
|
|
46
|
-
"@pikacss/unplugin-pikacss": "0.0.
|
|
46
|
+
"@pikacss/unplugin-pikacss": "0.0.41"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@nuxt/schema": "^4.2.2"
|
package/README.md
DELETED
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
# @pikacss/nuxt-pikacss
|
|
2
|
-
|
|
3
|
-
PikaCSS module for Nuxt.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
pnpm add @pikacss/nuxt-pikacss
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Quick Start
|
|
12
|
-
|
|
13
|
-
**nuxt.config.ts**:
|
|
14
|
-
```typescript
|
|
15
|
-
export default defineNuxtConfig({
|
|
16
|
-
modules: [
|
|
17
|
-
'@pikacss/nuxt-pikacss'
|
|
18
|
-
],
|
|
19
|
-
pikacss: {
|
|
20
|
-
// options
|
|
21
|
-
}
|
|
22
|
-
})
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
## Features
|
|
26
|
-
|
|
27
|
-
- 🚀 Zero-config setup for Nuxt
|
|
28
|
-
- ⚡ Hot Module Replacement (HMR) support
|
|
29
|
-
- 🎯 Automatic TypeScript type generation
|
|
30
|
-
- 🔧 Full PikaCSS configuration support
|
|
31
|
-
- 📦 Built-in integration with Nuxt build pipeline
|
|
32
|
-
|
|
33
|
-
## Usage
|
|
34
|
-
|
|
35
|
-
### Basic Setup
|
|
36
|
-
|
|
37
|
-
The module works out of the box with zero configuration:
|
|
38
|
-
|
|
39
|
-
```typescript
|
|
40
|
-
// nuxt.config.ts
|
|
41
|
-
export default defineNuxtConfig({
|
|
42
|
-
modules: [
|
|
43
|
-
'@pikacss/nuxt-pikacss'
|
|
44
|
-
]
|
|
45
|
-
})
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
### Configuration
|
|
49
|
-
|
|
50
|
-
You can customize PikaCSS through the `pikacss` option:
|
|
51
|
-
|
|
52
|
-
```typescript
|
|
53
|
-
// nuxt.config.ts
|
|
54
|
-
export default defineNuxtConfig({
|
|
55
|
-
modules: [
|
|
56
|
-
'@pikacss/nuxt-pikacss'
|
|
57
|
-
],
|
|
58
|
-
pikacss: {
|
|
59
|
-
// File scanning configuration
|
|
60
|
-
scan: {
|
|
61
|
-
include: ['**/*.vue', '**/*.tsx', '**/*.jsx'],
|
|
62
|
-
exclude: ['node_modules/**']
|
|
63
|
-
},
|
|
64
|
-
|
|
65
|
-
// Engine configuration or config file path
|
|
66
|
-
config: './pika.config.ts',
|
|
67
|
-
|
|
68
|
-
// Auto-create config file if missing
|
|
69
|
-
autoCreateConfig: true,
|
|
70
|
-
|
|
71
|
-
// PikaCSS function name (globally available in Nuxt)
|
|
72
|
-
fnName: 'pika',
|
|
73
|
-
|
|
74
|
-
// Output format for class names
|
|
75
|
-
transformedFormat: 'string', // 'string' | 'array' | 'inline'
|
|
76
|
-
|
|
77
|
-
// TypeScript code generation
|
|
78
|
-
tsCodegen: true, // or specify a path: 'src/pika.gen.ts'
|
|
79
|
-
|
|
80
|
-
// CSS code generation
|
|
81
|
-
cssCodegen: true // or specify a path: 'src/pika.gen.css'
|
|
82
|
-
}
|
|
83
|
-
})
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
::: tip
|
|
87
|
-
The `pika()` function is globally available in Nuxt components - no import needed!
|
|
88
|
-
:::
|
|
89
|
-
|
|
90
|
-
### Using in Components
|
|
91
|
-
|
|
92
|
-
The module automatically imports the virtual `pika.css` module and makes `pika()` globally available:
|
|
93
|
-
|
|
94
|
-
```vue
|
|
95
|
-
<script setup lang="ts">
|
|
96
|
-
// ✅ No imports needed - pika() is globally injected
|
|
97
|
-
|
|
98
|
-
// Style object
|
|
99
|
-
const styles = pika({
|
|
100
|
-
display: 'flex',
|
|
101
|
-
alignItems: 'center',
|
|
102
|
-
gap: '1rem'
|
|
103
|
-
})
|
|
104
|
-
|
|
105
|
-
// Using shortcuts
|
|
106
|
-
const centered = pika('flex-center')
|
|
107
|
-
|
|
108
|
-
// Combining shortcuts with styles
|
|
109
|
-
const button = pika('btn', {
|
|
110
|
-
backgroundColor: '#3b82f6',
|
|
111
|
-
color: 'white'
|
|
112
|
-
})
|
|
113
|
-
</script>
|
|
114
|
-
|
|
115
|
-
<template>
|
|
116
|
-
<div :class="styles">
|
|
117
|
-
<button :class="button">Click me</button>
|
|
118
|
-
</div>
|
|
119
|
-
</template>
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
## Options
|
|
123
|
-
|
|
124
|
-
All options from `@pikacss/unplugin-pikacss` are supported. See the [unplugin documentation](../unplugin/README.md) for details.
|
|
125
|
-
|
|
126
|
-
## PikaCSS Configuration
|
|
127
|
-
|
|
128
|
-
Create a `pika.config.ts` file in your project root:
|
|
129
|
-
|
|
130
|
-
```typescript
|
|
131
|
-
import { defineEngineConfig } from '@pikacss/core'
|
|
132
|
-
|
|
133
|
-
export default defineEngineConfig({
|
|
134
|
-
// Your PikaCSS configuration
|
|
135
|
-
})
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
## Documentation
|
|
139
|
-
|
|
140
|
-
For complete documentation, visit: [PikaCSS Documentation](https://pikacss.github.io/pikacss/)
|
|
141
|
-
|
|
142
|
-
## License
|
|
143
|
-
|
|
144
|
-
MIT © DevilTea
|