Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit c9ede63

Browse files
Easybuoyclarkdo
Easybuoy
and
clarkdo
authored
feat: add chakra-ui-vue (#573)
 Co-authored-by: Clark Du <[email protected]>
1 parent 417e964 commit c9ede63

File tree

8 files changed

+321
-0
lines changed

8 files changed

+321
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ yarn create nuxt-app <my-project>
4242
- [Bootstrap](https://github.com/bootstrap-vue/bootstrap-vue)
4343
- [Buefy](https://buefy.org)
4444
- [Bulma](https://github.com/jgthms/bulma)
45+
- [Chakra UI](https://github.com/chakra-ui/chakra-ui-vue)
4546
- [Element](https://github.com/ElemeFE/element)
4647
- [Framevuerk](https://github.com/framevuerk/framevuerk)
4748
- [iView](https://www.iviewui.com/)

‎packages/cna-template/template/frameworks/chakra-ui/layouts/default.vue

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div class="container">
3+
<CThemeProvider>
4+
<CColorModeProvider>
5+
<CBox font-family="body" as="main">
6+
<CReset />
7+
<Nuxt />
8+
</CBox>
9+
</CColorModeProvider>
10+
</CThemeProvider>
11+
</div>
12+
</template>
13+
<script>
14+
import {
15+
CThemeProvider,
16+
CColorModeProvider,
17+
CReset,
18+
CBox
19+
} from '@chakra-ui/vue'
20+
21+
export default {
22+
name: 'App',
23+
components: {
24+
CThemeProvider,
25+
CColorModeProvider,
26+
CReset,
27+
CBox
28+
}
29+
}
30+
</script>

‎packages/cna-template/template/frameworks/chakra-ui/package.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"dependencies": {
3+
"@chakra-ui/nuxt": "^0.0.7",
4+
"@nuxtjs/emotion": "^0.0.1"
5+
}
6+
}

‎packages/cna-template/template/frameworks/chakra-ui/pages/index.vue

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<template>
2+
<div class="container">
3+
<CBox
4+
v-bind="mainStyles[colorMode]"
5+
d="flex"
6+
w="100vw"
7+
h="100vh"
8+
flex-dir="column"
9+
justify-content="center"
10+
>
11+
<CHeading text-align="center" mb="4">
12+
⚡️ Hello chakra-ui/vue
13+
</CHeading>
14+
<CFlex justify="center" direction="column" align="center">
15+
<CBox mb="3">
16+
<CIconButton
17+
mr="3"
18+
:icon="colorMode === 'light' ? 'moon' : 'sun'"
19+
:aria-label="`Switch to ${
20+
colorMode === 'light' ? 'dark' : 'light'
21+
} mode`"
22+
@click="toggleColorMode"
23+
/>
24+
<CButton
25+
left-icon="info"
26+
variant-color="blue"
27+
@click="showToast"
28+
>
29+
Show Toast
30+
</CButton>
31+
</CBox>
32+
<CAvatarGroup>
33+
<CAvatar
34+
name="Evan You"
35+
alt="Evan You"
36+
src="https://pbs.twimg.com/profile_images/1206997998900850688/cTXTQiHm_400x400.jpg"
37+
>
38+
<CAvatarBadge size="1.0em" bg="green.500" />
39+
</CAvatar>
40+
<CAvatar
41+
name="Jonathan Bakebwa"
42+
alt="Jonathan Bakebwa"
43+
src="https://res.cloudinary.com/xtellar/image/upload/v1572857445/me_zqos4e.jpg"
44+
>
45+
<CAvatarBadge size="1.0em" bg="green.500" />
46+
</CAvatar>
47+
<CAvatar
48+
name="Segun Adebayo"
49+
alt="Segun Adebayo"
50+
src="https://pbs.twimg.com/profile_images/1169353373012897802/skPUWd6e_400x400.jpg"
51+
>
52+
<CAvatarBadge size="1.0em" bg="green.500" />
53+
</CAvatar>
54+
<CAvatar src="pop">
55+
<CAvatarBadge size="1.0em" border-color="papayawhip" bg="tomato" />
56+
</CAvatar>
57+
</CAvatarGroup>
58+
<CButton
59+
left-icon="close"
60+
variant-color="red"
61+
mt="3"
62+
@click="showModal = true"
63+
>
64+
Delete Account
65+
</CButton>
66+
<CModal :is-open="showModal">
67+
<CModalOverlay />
68+
<CModalContent>
69+
<CModalHeader>Are you sure?</CModalHeader>
70+
<CModalBody>Deleting user cannot be undone</CModalBody>
71+
<CModalFooter>
72+
<CButton @click="showModal = false">
73+
Cancel
74+
</CButton>
75+
<CButton
76+
margin-left="3"
77+
variant-color="red"
78+
@click="showModal = false"
79+
>
80+
Delete User
81+
</CButton>
82+
</CModalFooter>
83+
<CModalCloseButton @click="showModal = false" />
84+
</CModalContent>
85+
</CModal>
86+
</CFlex>
87+
</CBox>
88+
</div>
89+
</template>
90+
91+
<script lang="js">
92+
import {
93+
CBox,
94+
CButton,
95+
CAvatarGroup,
96+
CAvatar,
97+
CAvatarBadge,
98+
CModal,
99+
CModalContent,
100+
CModalOverlay,
101+
CModalHeader,
102+
CModalFooter,
103+
CModalBody,
104+
CModalCloseButton,
105+
CIconButton,
106+
CFlex,
107+
CHeading
108+
} from '@chakra-ui/vue'
109+
110+
export default {
111+
name: 'App',
112+
inject: ['$chakraColorMode', '$toggleColorMode'],
113+
components: {
114+
CBox,
115+
CButton,
116+
CAvatarGroup,
117+
CAvatar,
118+
CAvatarBadge,
119+
CModal,
120+
CModalContent,
121+
CModalOverlay,
122+
CModalHeader,
123+
CModalFooter,
124+
CModalBody,
125+
CModalCloseButton,
126+
CIconButton,
127+
CFlex,
128+
CHeading
129+
},
130+
data () {
131+
return {
132+
showModal: false,
133+
mainStyles: {
134+
dark: {
135+
bg: 'gray.700',
136+
color: 'whiteAlpha.900'
137+
},
138+
light: {
139+
bg: 'white',
140+
color: 'gray.900'
141+
}
142+
}
143+
}
144+
},
145+
computed: {
146+
colorMode () {
147+
return this.$chakraColorMode()
148+
},
149+
theme () {
150+
return this.$chakraTheme()
151+
},
152+
toggleColorMode () {
153+
return this.$toggleColorMode
154+
}
155+
},
156+
methods: {
157+
showToast () {
158+
this.$toast({
159+
title: 'Account created.',
160+
description: "We've created your account for you.",
161+
status: 'success',
162+
duration: 10000,
163+
isClosable: true
164+
})
165+
}
166+
}
167+
}
168+
</script>

‎packages/cna-template/template/nuxt/nuxt.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,11 @@ export default {
112112
<%_ } else if (ui === 'buefy') { _%>
113113
// Doc: https://buefy.github.io/#/documentation
114114
'nuxt-buefy',
115+
<%_ } else if (ui === 'chakra-ui') { _%>
116+
// Doc: https://github.com/chakra-ui/chakra-ui-vue/tree/develop/packages/nuxt-chakra
117+
// Doc: https://github.com/nuxt-community/emotion-module#readme
118+
'@chakra-ui/nuxt',
119+
'@nuxtjs/emotion',
115120
<%_ } _%>
116121
<%_ if (axios) { _%>
117122
// Doc: https://axios.nuxtjs.org/usage

‎packages/create-nuxt-app/lib/prompts.js

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ module.exports = [
3535
{ name: 'Bootstrap Vue', value: 'bootstrap' },
3636
{ name: 'Buefy', value: 'buefy' },
3737
{ name: 'Bulma', value: 'bulma' },
38+
{ name: 'Chakra UI', value: 'chakra-ui' },
3839
{ name: 'Element', value: 'element-ui' },
3940
{ name: 'Framevuerk', value: 'framevuerk' },
4041
{ name: 'iView', value: 'iview' },

‎packages/create-nuxt-app/test/snapshots/index.test.js.md

+110
Original file line numberDiff line numberDiff line change
@@ -3194,6 +3194,116 @@ Generated by [AVA](https://avajs.dev).
31943194
}␊
31953195
`
31963196

3197+
## verify ui: Chakra UI
3198+
3199+
> Generated files
3200+
3201+
[
3202+
'.editorconfig',
3203+
'.gitignore',
3204+
'README.md',
3205+
'assets/README.md',
3206+
'components/Logo.vue',
3207+
'components/README.md',
3208+
'layouts/README.md',
3209+
'layouts/default.vue',
3210+
'middleware/README.md',
3211+
'nuxt.config.js',
3212+
'package.json',
3213+
'pages/README.md',
3214+
'pages/index.vue',
3215+
'plugins/README.md',
3216+
'static/README.md',
3217+
'static/favicon.ico',
3218+
'store/README.md',
3219+
]
3220+
3221+
> package.json
3222+
3223+
{
3224+
dependencies: {
3225+
'@chakra-ui/nuxt': '^0.0.7',
3226+
'@nuxtjs/emotion': '^0.0.1',
3227+
nuxt: '^2.14.0',
3228+
},
3229+
devDependencies: {},
3230+
private: true,
3231+
scripts: {
3232+
build: 'nuxt build',
3233+
dev: 'nuxt',
3234+
generate: 'nuxt generate',
3235+
start: 'nuxt start',
3236+
},
3237+
}
3238+
3239+
> Generated nuxt.config.js
3240+
3241+
`␊
3242+
export default {␊
3243+
/*␊
3244+
** Nuxt rendering mode␊
3245+
** See https://nuxtjs.org/api/configuration-mode␊
3246+
*/␊
3247+
mode: 'universal',␊
3248+
/*␊
3249+
** Nuxt target␊
3250+
** See https://nuxtjs.org/api/configuration-target␊
3251+
*/␊
3252+
target: 'server',␊
3253+
/*␊
3254+
** Headers of the page␊
3255+
** See https://nuxtjs.org/api/configuration-head␊
3256+
*/␊
3257+
head: {␊
3258+
title: process.env.npm_package_name || '',␊
3259+
meta: [␊
3260+
{ charset: 'utf-8' },␊
3261+
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },␊
3262+
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }␊
3263+
],␊
3264+
link: [␊
3265+
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }␊
3266+
]␊
3267+
},␊
3268+
/*␊
3269+
** Global CSS␊
3270+
*/␊
3271+
css: [␊
3272+
],␊
3273+
/*␊
3274+
** Plugins to load before mounting the App␊
3275+
** https://nuxtjs.org/guide/plugins␊
3276+
*/␊
3277+
plugins: [␊
3278+
],␊
3279+
/*␊
3280+
** Auto import components␊
3281+
** See https://nuxtjs.org/api/configuration-components␊
3282+
*/␊
3283+
components: true,␊
3284+
/*␊
3285+
** Nuxt.js dev-modules␊
3286+
*/␊
3287+
buildModules: [␊
3288+
],␊
3289+
/*␊
3290+
** Nuxt.js modules␊
3291+
*/␊
3292+
modules: [␊
3293+
// Doc: https://github.com/chakra-ui/chakra-ui-vue/tree/develop/packages/nuxt-chakra␊
3294+
// Doc: https://github.com/nuxt-community/emotion-module#readme␊
3295+
'@chakra-ui/nuxt',␊
3296+
'@nuxtjs/emotion',␊
3297+
],␊
3298+
/*␊
3299+
** Build configuration␊
3300+
** See https://nuxtjs.org/api/configuration-build/␊
3301+
*/␊
3302+
build: {␊
3303+
}␊
3304+
}␊
3305+
`
3306+
31973307
## verify ui: Element
31983308

31993309
> Generated files

‎packages/create-nuxt-app/test/snapshots/index.test.js.snap

165 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)