carbon-design-system / carbon-tutorial-vue Goto Github PK

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?

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/#/

Hi there, for us svg icon not work.

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.

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.

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

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

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

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

Any chance you have plans to add a Svelte tutorial?

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.

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.

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

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.

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.

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

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

)

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

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

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!