{"componentChunkName":"component---src-pages-get-started-develop-vue-mdx","path":"/get-started/develop/vue/","result":{"pageContext":{"frontmatter":{"title":"Develop","description":"The Carbon Design System is built React first. We also support core parts of the system in vanilla JS, Angular, and Vue.","tabs":["React","Vanilla","Angular","Vue","Other frameworks"]},"relativePagePath":"/get-started/develop/vue.mdx","titleType":"prepend","MdxNode":{"id":"9f86e098-9b58-5f9e-b632-0405aa93d282","children":[],"parent":"0c3287b5-1f03-5b62-bb1a-071ff79326d8","internal":{"content":"---\ntitle: Develop\ndescription: The Carbon Design System is built React first. We also support core parts of the system in vanilla JS, Angular, and Vue.\ntabs: [\"React\", \"Vanilla\", \"Angular\", \"Vue\", \"Other frameworks\"]\n---\n\n<PageDescription>\n\nThe library provides front-end developers & engineers a collection of reusable Vue components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.\n\n</PageDescription>\n\n<InlineNotification>\n\nThe Vue library is maintained by members of the Carbon community. For support, contact the [Carbon Vue team](https://github.com/carbon-design-system/carbon-components-vue/issues/new/choose).\n\n</InlineNotification>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"Carbon Components Vue\"\n    href=\"https://vue.carbondesignsystem.com\"\n    >\n\n![Storybook icon](images/storybook.svg)\n\n  </ResourceCard>\n</Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Try Vue components with CodeSandbox\"\n      href=\"https://codesandbox.io/s/5zk452o9jp\"\n    >\n      <MdxIcon name=\"codesandbox\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Getting started\n\nAssuming we're starting with a new Vue CLI project:\n\n```sh\n$ vue create my-project\nVue CLI v3.5.2\n? Please pick a preset: default (babel, eslint)\n$ cd my-project\n```\n\nUsing Yarn\n\n```sh\n$ yarn add @carbon/vue\n```\n\nOr npm\n\n```sh\n$ npm install @carbon/vue\n```\n\nIn src/main.js add the following to include the carbon styles and components.\n\n```js\nimport \"carbon-components/css/carbon-components.css\";\nimport CarbonComponentsVue from \"@carbon/vue/src/index\";\nVue.use(CarbonComponentsVue);\n```\n\nReplace the contents of src/components/HelloWorld.vue with the following\n\n```html\n<template>\n  <div class=\"sample\">\n    <h1>Example use of @carbon/vue</h1>\n    <cv-text-input\n      label=\"Who are you?\"\n      v-model=\"yourName\"\n      placeholder=\"your name\"\n    />\n    <cv-button @click=\"onClick\">Hello {{yourName}}</cv-button>\n    <cv-modal :visible=\"visible\" @modal-hidden=\"modalClosed\">\n      <template slot=\"title\">Welcome to @carbon/vue {{yourName}}</template>\n      <template slot=\"content\">\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad\n          minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n          aliquip ex ea commodo consequat.\n        </p>\n      </template>\n    </cv-modal>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: \"HelloWorld\",\n    data() {\n      return {\n        yourName: \"\",\n        visible: false,\n      };\n    },\n    methods: {\n      onClick() {\n        this.visible = true;\n      },\n      modalClosed() {\n        this.visible = false;\n      },\n    },\n  };\n</script>\n\n<style>\n  .sample {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    max-width: 600px;\n    margin: 5% auto;\n  }\n\n  .cv-text-input {\n    margin: 30px 0;\n  }\n</style>\n```\n\nThat's it! Now start the server and start building.\n\nUsing Yarn\n\n```sh\n$ yarn serve\n```\n\nOr npm\n\n```sh\n$ npm serve\n```\n\n_Note: This isn't the only way to bootstrap a_ `carbon-components-vue` _application, but the combination of_ `Vue CLI` _and the_ `carbon-components` _scss is our recommended setup._\n\n### List of available components\n\nView available Vue Components [here](http://vue.carbondesignsystem.com). Usage information is available in the notes provided with each story.\n\n## Troubleshooting\n\nIf you experience any issues while getting set up with Carbon Components Vue, please head over to the [GitHub repo](https://github.com/carbon-design-system/carbon-components-vue) for more guidelines and support. Please [create an issue](https://github.com/carbon-design-system/carbon-components-vue/issues) if your issue does not already exist.\n","type":"Mdx","contentDigest":"8ca3e60db5c51370dc74ed6ded5acf7b","counter":1598,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Develop","description":"The Carbon Design System is built React first. We also support core parts of the system in vanilla JS, Angular, and Vue.","tabs":["React","Vanilla","Angular","Vue","Other frameworks"]},"exports":{},"rawBody":"---\ntitle: Develop\ndescription: The Carbon Design System is built React first. We also support core parts of the system in vanilla JS, Angular, and Vue.\ntabs: [\"React\", \"Vanilla\", \"Angular\", \"Vue\", \"Other frameworks\"]\n---\n\n<PageDescription>\n\nThe library provides front-end developers & engineers a collection of reusable Vue components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.\n\n</PageDescription>\n\n<InlineNotification>\n\nThe Vue library is maintained by members of the Carbon community. For support, contact the [Carbon Vue team](https://github.com/carbon-design-system/carbon-components-vue/issues/new/choose).\n\n</InlineNotification>\n\n## Resources\n\n<Row className=\"resource-card-group\">\n<Column colLg={4} colMd={4} noGutterSm>\n  <ResourceCard\n    subTitle=\"Carbon Components Vue\"\n    href=\"https://vue.carbondesignsystem.com\"\n    >\n\n![Storybook icon](images/storybook.svg)\n\n  </ResourceCard>\n</Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Try Vue components with CodeSandbox\"\n      href=\"https://codesandbox.io/s/5zk452o9jp\"\n    >\n      <MdxIcon name=\"codesandbox\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Getting started\n\nAssuming we're starting with a new Vue CLI project:\n\n```sh\n$ vue create my-project\nVue CLI v3.5.2\n? Please pick a preset: default (babel, eslint)\n$ cd my-project\n```\n\nUsing Yarn\n\n```sh\n$ yarn add @carbon/vue\n```\n\nOr npm\n\n```sh\n$ npm install @carbon/vue\n```\n\nIn src/main.js add the following to include the carbon styles and components.\n\n```js\nimport \"carbon-components/css/carbon-components.css\";\nimport CarbonComponentsVue from \"@carbon/vue/src/index\";\nVue.use(CarbonComponentsVue);\n```\n\nReplace the contents of src/components/HelloWorld.vue with the following\n\n```html\n<template>\n  <div class=\"sample\">\n    <h1>Example use of @carbon/vue</h1>\n    <cv-text-input\n      label=\"Who are you?\"\n      v-model=\"yourName\"\n      placeholder=\"your name\"\n    />\n    <cv-button @click=\"onClick\">Hello {{yourName}}</cv-button>\n    <cv-modal :visible=\"visible\" @modal-hidden=\"modalClosed\">\n      <template slot=\"title\">Welcome to @carbon/vue {{yourName}}</template>\n      <template slot=\"content\">\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad\n          minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n          aliquip ex ea commodo consequat.\n        </p>\n      </template>\n    </cv-modal>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: \"HelloWorld\",\n    data() {\n      return {\n        yourName: \"\",\n        visible: false,\n      };\n    },\n    methods: {\n      onClick() {\n        this.visible = true;\n      },\n      modalClosed() {\n        this.visible = false;\n      },\n    },\n  };\n</script>\n\n<style>\n  .sample {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    max-width: 600px;\n    margin: 5% auto;\n  }\n\n  .cv-text-input {\n    margin: 30px 0;\n  }\n</style>\n```\n\nThat's it! Now start the server and start building.\n\nUsing Yarn\n\n```sh\n$ yarn serve\n```\n\nOr npm\n\n```sh\n$ npm serve\n```\n\n_Note: This isn't the only way to bootstrap a_ `carbon-components-vue` _application, but the combination of_ `Vue CLI` _and the_ `carbon-components` _scss is our recommended setup._\n\n### List of available components\n\nView available Vue Components [here](http://vue.carbondesignsystem.com). Usage information is available in the notes provided with each story.\n\n## Troubleshooting\n\nIf you experience any issues while getting set up with Carbon Components Vue, please head over to the [GitHub repo](https://github.com/carbon-design-system/carbon-components-vue) for more guidelines and support. Please [create an issue](https://github.com/carbon-design-system/carbon-components-vue/issues) if your issue does not already exist.\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/get-started/develop/vue.mdx"}}}}