@carbon/vue 3.0.9-alpha.0 → 3.0.10

package/README.md

@@ -1,6 +1,6 @@
 # @carbon/vue-3
 
-<p align="center">
+<p>
   <a href="https://github.com/carbon-design-system/carbon/blob/master/LICENSE">
     <img src="https://img.shields.io/badge/license-Apache--2.0-blue.svg" alt="Carbon is released under the Apache-2.0 license" />
   </a>
@@ -13,6 +13,9 @@
   <a href="https://github.com/carbon-design-system/carbon/blob/master/.github/CONTRIBUTING.md">
     <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome" />
   </a>
+  <a href="https://discord.gg/J7JEUEkTRX">
+      <img src="https://img.shields.io/discord/689212587170201628?color=5865F2" alt="Chat with us on Discord">
+  </a>
 </p>
 
 > Vue implementation of the Carbon Design System
@@ -26,34 +29,70 @@ The [library](http://vue.carbondesignsystem.com/) provides front-end developers
 
 As a community project contributions are not only welcome, but essential for the maintenance and growth of this project.
 
-### Vue 3 Guidance
+## Install
+
+```shell
+npm add @carbon/vue
+```
+
+or
+
+```shell
+$ yarn add @carbon/vue
+```
+
+### Add to Vue project
+
+`src/main.js`
+
+```js
+import CarbonVue3 from '@carbon/vue';
+import App from './App.vue';
+const app = createApp(App);
+app.use(CarbonVue3);
+app.mount('#app');
+```
+
+See [Hello Carbon Vue](https://github.com/IBM/hello-carbon-vue3) for an example Vue project with Carbon.
+
+### Add to Nuxt project
+
+`plugins/carbon-vue.js`
+
+```js
+import CarbonVue from '@carbon/vue'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(CarbonVue)
+}
+```
 
-We are actively working on components for Vue 3 and would love to get your help with this. If you want to contribute follow this guidance:
+See [Hello Carbon Nuxt](#add-to-nuxt-project) **coming soon**
 
-1. Fork this repo and checkout the `vNext` branch
-2. Look to see which components have not yet been implemented. You can do this by comparing the components listed in the [Carbon React storybook](https://react.carbondesignsystem.com/?path=/story/getting-started-welcome--welcome) with the components in the `src/components` directory.
-3. When you find a component that interests you, look in the open issue list to see if someone else might already be working on it. Look for issues with a "V3 - Vue3" label. A "dibs" issue will have that label and a title of "[component name] work in progress" so for example "**CvDatePicker work in progress**".
-4. If no one else is already working on it, create an issue and label it as above.
+### Vue 3
+
+- Vue 2 support will end on Dec 31, 2023. Learn [more](https://vuejs.org/guide/introduction.html).
+- Upgrading from Vue 2? Check out the [Migration Guide](https://v3-migration.vuejs.org/).
+- Vue 2 components can be found on the `vue2` [branch](https://github.com/carbon-design-system/carbon-components-vue/tree/vue2)
+
+Vue 3 components for Carbon 10 have reached parity with the Vue 2 components.
+More work is needed especially around accessibility. If you want to improve Vue 3 components follow these guidelines.
+
+1. Fork this repo and checkout the `main` branch
+2. Look to see which components are currently being improved. You can do this by looking in the [issues list](https://github.com/carbon-design-system/carbon-components-vue/issues).
+3. If you want to improve a component, look in the open issue list to see if someone else might already be working on it. Look for issues with a "V3 - Vue3" label and the name of the component. For example "**CvDatePicker - improving accessibility**".
+4. If no one else is already working on it, create an issue using the "🍪 Vue 3 - improve component" and label it as above.
    - Work on the component and create a PR when you are ready.
    - Components are expected to be implemented as [single file components](https://vuejs.org/guide/scaling-up/sfc.html) using the Vue [composition api](https://vuejs.org/guide/extras/composition-api-faq.html). See `CvCheckbox` as an example. The Vue 2 components use the options API.
-   - You should reference the existing Vue 2 component while developing the code. The existing components often have the community enhancements that need to be maintained.
-   - You should reference the DOM in the React components storybook and be sure to include any accessibility improvements that might be there.
-   - You should provide a story and test case for the component. For example:
-     ```
-     src/components/CvCheckbox/CvCheckbox.stories.js
-     src/components/CvCheckbox/CvCheckbox.vue
-     src/components/CvCheckbox/__tests__/CvCheckbox.spec.js
-     src/components/CvCheckbox/index.js
-     ```
+   - You should reference the DOM in the React components storybook and be sure to include any accessibility
+     improvements that might be there.
+   - You should update the story and test cases for the component if applicable. Sometimes the story might need updating
+     almost always the test cases for the component will need updates.
    - If you have question tag @davidnixon in your issue and let me know how I can help.
 
 ### Changelog
 
-[CHANGELOG.md](./packages/core/CHANGELOG.md)
-
-## Getting started
-
-[Usage and getting started instructions](./packages/core/README.md#getting-started) for @carbon/vue.
+[CHANGELOG.md](./CHANGELOG.md)
 
 ### List of available components