Skip to content

Commit

Permalink
fix: prettier format
Browse files Browse the repository at this point in the history
Signed-off-by: David Nixon <[email protected]>
  • Loading branch information
davidnixon committed Oct 27, 2023
1 parent 74c43be commit 6fef62e
Showing 1 changed file with 29 additions and 28 deletions.
57 changes: 29 additions & 28 deletions src/pages/developing/frameworks/vue.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -70,33 +70,33 @@ cd vue-project
npm install @carbon/vue
```

In src/main.js, after `import App from './App.vue'`, add the following to include the
carbon styles and components.
In src/main.js, after `import App from './App.vue'`, add the following to
include the carbon styles and components.

```js
import 'carbon-components/css/carbon-components.css';
import CarbonComponentsVue from '@carbon/vue';

const app = createApp(App);
app.use(CarbonComponentsVue);
app.mount("#app");
// remove the line: createApp(App).mount('#app')
app.mount('#app');
// remove the line: createApp(App).mount('#app')
```

Replace the contents of src/components/HelloWorld.vue with the following

```html
<script setup>
import { ref } from 'vue';
const yourName = ref('')
const visible = ref(false)
function onClick() {
visible.value = true;
}
function modalClosed() {
visible.value = false;
}
import { ref } from 'vue';
const yourName = ref('');
const visible = ref(false);
function onClick() {
visible.value = true;
}
function modalClosed() {
visible.value = false;
}
</script>

<template>
Expand All @@ -119,21 +119,21 @@ function modalClosed() {
</p>
</template>
</cv-modal>
</div>
</div>
</template>

<style scoped lang="css">
.sample {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 600px;
margin: 5% auto;
}
.sample > div {
margin: 30px 0;
}
.sample {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 600px;
margin: 5% auto;
}
.sample > div {
margin: 30px 0;
}
</style>
```

Expand All @@ -145,8 +145,9 @@ npm run dev

_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._
See [Hello carbon vue3](https://github.com/IBM/hello-carbon-vue3) for a complete example app.
_scss is our recommended setup._ See
[Hello carbon vue3](https://github.com/IBM/hello-carbon-vue3) for a complete
example app.

### List of available components

Expand Down

0 comments on commit 6fef62e

Please sign in to comment.