carbon-design-system / carbon-tutorial-vue

Carbon Tutorial Vue

This tutorial will guide you in creating a Vue app with the Carbon Design System. We’ll teach you the ins and outs of using Carbon components, while introducing web development best practices along the way.

Get started by visiting the tutorial instructions.

Available Scripts

This project was bootstrapped with Vue CLI with the following config.

vue create carbon-tutorial-vue

Vue CLI v3.9.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n

In the project directory, you can run:

'yarn serve'

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

This will create a dist folder which can be deployed to gh-pages or any other host.

'yarn lint'

Runs the linter against your code.

'yarn test:unit'

Runs your unit tests

Learn More

You can learn more in the Vue CLI Overview.

To learn Vue, check out the Vue documentation.

carbon-tutorial-vue's Issues

Step 1 - Module build failed

After performing the command @import 'carbon-components/scss/globals/scss/styles'; I found an error in step 1 and I can't solve it

)

Pull requests here won’t count toward Hacktoberfest.

Hi there,

Thank you for your interest in Hacktoberfest and in helping others make their first contributions to open source.

While we agree that it's important to help others, this repository does not do this in a way that is in line with the Hacktoberfest values. Please read the part that talks about high-quality contributions to understand why we are reaching out and taking action. Due to this, we've added this repository to the list of excluded repositories which means pull requests here will not count toward Hacktoberfest 2020.

This is not a DigitalOcean decision, it's one that is inspired by the community of maintainers and contributors who all agree that quality is more important than quantity when it comes to engagement in the Open Source community. The values remind us to shift the focus from contributions to repositories that encourage folks to quickly create and gain a pull request to contributions that will help people level-up their skills and contribute to open-source projects that are in need of help.

If you feel that this repository is an effective learning resource, we encourage you to keep running it since a core part of the aim for Hacktoberfest is to encourage new folks to get involved with open-source.

However, if you are interested in having contributions to this repo count toward Hacktoberfest we encourage you to take a look at this list of Hacktoberfest issues for inspiration and make the necessary changes to focus on enabling people to make meaningful contributions to open source projects.

If you have any questions about this or participating in Hacktoberfest, please contact our team via email [email protected] or join our community Discord server.

Happy Hacking,
The Hacktoberfest Team

Hacktoberfest is presented by DigitalOcean, Intel and DEV.

Add automated tutorial tests

Carbon tutorial react has automated tests to verify submissions saving the need to manually review and approve tutorial PRs.

Add similar tests and the infrastructure needed to achieve the same automation.

Add sketch files mentioned in step 2

Create tutorial step 1

Step 2 no longer works with @carbon/vue v 2.44.0 (cv-data-table issue)

cv-data-table headers do not render with carbon/vue 2.44.0 which is the installed version when following the tutorial.

Downgrading the carbon/vue package to 2.37.1 rectifies the issue.

I will investigate further and update the issues as appropriate.

Search icon is displayed outside the search field.

I am currently trying to implement a search. When I use the search component, the search icon is always displayed outside the input field.

Unfortunately, the icon is not displayed inside the field as in the example.

I would be very grateful for your help!

Carbon Vue Tutorial does not support Vue3

I have been trying to do the carbon vue tutorial but an issues shows up in step 1 when trying to create the button as it says: a.createElementVNode is not a function. I guess that issues comes from the fact that the tutorial is done for Vue2 and not Vue3, is that right?

pr reviews

Hi,
Do you still review pull requests?
Thanks,
jq

Step 3 failing on loading rule

I've just finished step 3 of tutorial but it's failing on loading rule graphql/template-strings.

My deploy logs are here on Netlify build
https://app.netlify.com/sites/carbon-tutorial-vue/deploys/5fb2831234098c00080401ea

I've tried to build it locally and it was successfuly.

On first building it failed on GQL Lint so I disabled it and error message stop showing. Now this one about graphql/template-strings remains.

My PR is #736

Create tutorial step 4

Create tutorial step 3

Update carbon Vue tutorial to use Nuxt

Ditto of this issue
Update carbon-tutorial to use Next.JS

Problems with step 2

Hello,

when trying to follow the second step of the tutorial, I faced some issues that seemed to prevent the pages from working correctly. By looking at @Sw0rdiX's files in PR #1429 I was able to sort out the issues.

It appears that some of the snippets that use the .cds prefix weren't working as expected in my local deployment, and had to be substituted with .bx. This happened for example in LandingPage.vue and its related _carbon-overrides.scss.

Additionally, the build would break when adding styles to row two. The prefix carbon-- had to be added to .landing-page__subheading and .landing-page__p as follows:

.landing-page__subheading {
  @include carbon--type-style('productive-heading-03');
  @include carbon--font-weight('semibold');
}

.landing-page__p {
  @include type-style('productive-heading-03');
  margin-top: $spacing-06;
  margin-bottom: $spacing-08;

  @include carbon--breakpoint-between((320px + 1), md) {
    max-width: 75%;
  }
}

My branch for step 2 can be found here in case someone wants to have a look at the dependencies I had installed.

I will remain available in case more information is required. Thanks in advance.

Deploy failed: The engine "node" is incompatible

Hi guys,

Deploy failed from Netlify bot, and it shows "node" is incompatible.

6:23:30 PM: yarn install v1.13.0
6:23:30 PM: [1/4] Resolving packages...
6:23:30 PM: [2/4] Fetching packages...
6:23:53 PM: error @carbon/[email protected]: The engine "node" is incompatible with this module. Expected version ">=12.x". Got "10.21.0"
6:23:53 PM: error Found incompatible module
6:23:53 PM: info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
6:23:53 PM: Error during Yarn install
6:23:53 PM: Error running command: Build script returned non-zero exit code: 1
6:23:53 PM: Failing build: Failed to build site
6:23:53 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1
6:23:53 PM: Finished processing build request in 1m7.201365923s

I think the script for deployment has to be updated.

How to use Carbon component with vue Template literals

Hi,
I've my own toochain to build vue apps: Rollup+typescript+pug.
I don't like use single file (.vue file), because I don't want use vue cli, webpack, etc...
I found to heavy for me (lot of dependencies).
Because I want be closer of pure native Ecmascript 6+ Development (and not use transformation like .vue single file) and "lightweight philosophy" of vue progressive framework ,
I use Template literals syntax, one of the 7 ways to use vue , like this :

import Vue from 'vue';
import myTemplate from "./myTemplate.pug";

const myView = Vue.extend({
template: myTemplate,
data() {
},
mounted() {
console.log("myView mounted.");
},
methods: {
}
});

export default myView;

In my literal template (myTemplate.pug), I want consume carbon vue components.
In order to start quickly with carbon, I would like:

1/ First, know if it's possible to use CDN in this context?
2/ Second, if OK, I'll use my rollup+typescript toolchain.

So, it will be very usefull to have a complete file sample (and not a snippet !) with:

• complete html file with the CDN references (style, components)
• the complete code initialisation of vue (in ES6+ native, and idealy in Typescript context, ES5)
• vue tag component referenced in a page (cv-button for exemple)

Because I'm not able yet to initiate a sample in this context (TS + Rollup).

Thank's a lot for your job and you help!

Regards
Stéphane

Help !!!!

Help me carbon -tutorial -vue examples !!!!

cv-button svg icon not work

Hi there, for us svg icon not work.

Step 3 personal issue regarding to Vue CLI

Hi,
I am trying to do step 3 in tutorial. When I try to use Vue CLI to add apollo it show this error

Anyone please help me to resolve this problem. I am using Window, @vue/cli 4.5.8
Thanks a lot

LandingPage.vue tabs not visible from step 2 and beyond

The About, Design, and Develop tabs of the landing page are not being displayed.

The Vue code is:

<cv-tabs selected="0" aria-label="Tab navigation">
  <cv-tab label="About">
    <div class="bx--grid bx--grid--no-gutter bx--grid--full-width">
      <div class="bx--row landing-page__tab-content">
        ... content ...
     </div>
    </div>
  </cv-tab>
  ... next tab ...
</cv-tabs>
  

Looking at step 3, where the tabs are displayed, the generated HTML:

<div data-tabs="" role="navigation" selected="selected" aria-label="Tab navigation" 
    class="cv-tab bx--tabs">
  <div tabindex="0" class="bx--tabs-trigger">
    <a href="javascript:void(0)" tabindex="-1" class="bx--tabs-trigger-text">
      About
    </a>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
      fill="currentColor" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true">
      <path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path>
    </svg>
  </div>
  <ul role="tablist" class="bx--tabs__nav bx--tabs__nav--hidden">
    <li role="tab" aria-selected="true" 
      class="cv-tabs-button  bx--tabs__nav-item bx--tabs__nav-item--selected">
      <a href="javascript:void(0)" role="tab" aria-controls="uid-53ac1a50-c815-4e10-be20-e251ef9901d6"
        id="uid-53ac1a50-c815-4e10-be20-e251ef9901d6-link" class="bx--tabs__nav-link">
        About
      </a>
    </li>
    <li role="tab" aria-selected="false" 
      class="cv-tabs-button  bx--tabs__nav-item">
      <a href="javascript:void(0)" role="tab" aria-controls="uid-07b32201-a2ea-4d24-8582-b3b2891c5d82"
        id="uid-07b32201-a2ea-4d24-8582-b3b2891c5d82-link" class="bx--tabs__nav-link">
        Design
      </a>
    </li>
    <li role="tab" aria-selected="false" 
      class="cv-tabs-button  bx--tabs__nav-item">
      <a href="javascript:void(0)" role="tab" aria-controls="uid-755060f7-d1dd-4cf9-9abb-82cd1c4e2beb"
        id="uid-755060f7-d1dd-4cf9-9abb-82cd1c4e2beb-link" class="bx--tabs__nav-link">
        Develop
      </a>
    </li>
  </ul>
</div>

However, when run locally (npm install + yarn serve)

<div class="cv-tabs" selected="selected" aria-label="Tab navigation" style="width: 100%;">
  <div data-tabs="" role="navigation" selected="selected" aria-label="Tab navigation"
    class="cv-tab bx--tabs--scrollable">
     <button aria-hidden="true" aria-label="scroll left" tabindex="-1" type="button" class="bx--tab--overflow-nav-button--hidden"><svg>
        <path></path>
      </svg></button>
    <!---->
    <ul role="tablist" class="bx--tabs--scrollable__nav">
      <li role="presentation"
        class="cv-tabs-button  bx--tabs--scrollable__nav-item bx--tabs__nav-item--selected bx--tabs--scrollable__nav-item--selected">
        <button role="tab" aria-controls="uid-3f410528-f16d-4bbe-b5dd-d3cf7c2d2075"
          id="uid-3f410528-f16d-4bbe-b5dd-d3cf7c2d2075-link" eslint-disable-next-line="" tabindex="0"
          class="bx--tabs--scrollable__nav-link" aria-selected="true">
          About
        </button></li>
      <li role="presentation" class="cv-tabs-button  bx--tabs--scrollable__nav-item"><button role="tab"
          aria-controls="uid-9b85b42b-7af4-4691-ad82-800f4b9f7a56" id="uid-9b85b42b-7af4-4691-ad82-800f4b9f7a56-link"
          eslint-disable-next-line="" tabindex="-1" class="bx--tabs--scrollable__nav-link">
          Design
        </button></li>
      <li role="presentation" class="cv-tabs-button  bx--tabs--scrollable__nav-item"><button role="tab"
          aria-controls="uid-5ecb99e4-8f8b-4c3c-855f-7d8f71a0e9e3" id="uid-5ecb99e4-8f8b-4c3c-855f-7d8f71a0e9e3-link"
          eslint-disable-next-line="" tabindex="-1" class="bx--tabs--scrollable__nav-link">
          Develop
        </button></li>
    </ul>
    <!----><button aria-hidden="true" aria-label="scroll right" tabindex="-1" type="button"
      class="bx--tab--overflow-nav-button--hidden"><svg>
        <path></path>
      </svg></button>
  </div>

This is so vastly different and I have no way of knowing the Vue code behind https://vue-step-3--carbon-tutorial-vue.netlify.app/#/

Svelte Carbon Tutorial

Any chance you have plans to add a Svelte tutorial?

Step 2 error with command :**yarn run ci-check**

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Create tutorial step 2

Create tutorial step 5

yarn ci-check

https://www.carbondesignsystem.com/tutorial/vue/step-5/#continuous-integration-ci-check

The ci-check hasn't been added to this project.

It either needs to be added or removed from the instructions.

ERROR: Permission to carbon-design-system/carbon-tutorial-vue.git denied to jurajmelis.

Hi,
How can I get access to pass vue tutorial ?

Step 2 has a const props declared that is not needed