Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

docs: update vuepress docs with codesandbox starter #409

Merged
merged 1 commit into from
Mar 30, 2021
Merged

docs: update vuepress docs with codesandbox starter #409

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions website/pages/with-vuepress.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export default ({
}
}
})
})
}
```

Now you can wrap your main application inside the Chakra `CThemeProvider` component by creating a layout wrapper in `theme/layouts/Layout.vue`.
Expand Down Expand Up @@ -105,7 +105,11 @@ export default {

## Using Chakra components

_In your `App.vue` file._
You can now use Chakra in your custom components for your theme in either your `theme/components` folder (available to other theme components),
or your `theme/global-components` folder (available to your markdown pages as well as other components).
Learn more about theme inheritance in the [Vuepress documentation](https://vuepress.vuejs.org/theme/inheritance.html#inheritance-strategy)

_In your `my-component.vue` file._

```vue
<template>
Expand All @@ -120,11 +124,21 @@ _In your `App.vue` file._
import { CBox, CButton } from '@chakra-ui/vue'

export default {
name: 'App',
name: 'MyComponent',
components: {
CBox,
CButton
}
}
</script>
```

### Vuepress Codesandbox Starters

Here's a link to sample component starter with Nuxt.js

- [Vuepress Starter](https://codesandbox.io/s/chakra-ui-vuepress-starter-qx4up)

### Storybook Components

You can also view all developed components in [Storybook](https://chakra-ui-vue.netlify.com)!