Forem: Front-End Foxes

Join us at our next Coding Bootcamp 🦊 💻

The Coding Mermaid 🧜‍♀️ — Thu, 14 Jul 2022 21:14:55 +0000

Are you interested in Front-end development and would like to start coding for free? Then, our next cohort is waiting for you! 💖

...and we're delighted to announce that we will be sponsored by ✨Reddit✨, who will be providing support and touch points during the cohort. How awesome is this?

But first, a little history

What are Front-end Foxes? 🦊

Front-End Foxes was founded by Jen Looper in February 2018. The goal of the program is to familiarize people who identify as women with front-end technologies in a supportive, cool and inclusive environment.

What will you learn? 📚

You will learn the basics of web development starting with HTML, CSS, JavaScript, and a JavaScript framework. You will also learn GitHub basics so you can add create your own portfolio and show it to the world!

Bootcamp duration ⏰

The classes will happen twice a week, 1.5 hours each, for 5 weeks. We truly recommend you to not skip any class, so you can take the most benefit of each topic.

Classes format 💻

The classes are fully online, and each class will have 20 students, four mentors, and one teacher. For each group of 5 students, there will be a mentor that will support you and help you out with any doubts that you may have!

Where to apply?

Are you ready to join us? Then we are looking forward to your 👉 application

We can't wait to see you there!

Can't apply for this edition?

Don't worry, we will have more dates! Subscribe our newsletter and stay updated

💬 Do you have a CFP idea? At Front-End Foxes 🦊, we are looking for you!

The Coding Mermaid 🧜‍♀️ — Mon, 11 Jul 2022 09:05:02 +0000

On September 13th, Front-End Foxes Day will happen, a day full of talk and we are looking forward to getting your proposal!

🦊What are Front-End Foxes?

In case you don't know, Front-End Foxes is an initiative founded by Jen Looper, that creates and hosts workshops to teach front-end technologies to under-represented people in a cool and fun way. We offer self-driven code labs completed in a workshop format in groups with mentoring by conference-goers and speakers who volunteer to help.

🗓️About the event

The event is fully remote and will happen on September 13th. There will be 2 formats:

Lightning talks: are 10 minutes in length and can be on technical or 'soft' topics
Full talks: are 30 minutes with 10 minutes of Q&A

💖Requirements for Speaking at the Conference

As our community is focused on empowering women, you need to be or identify yourself as a woman to give a talk. However, anyone can join as a viewer!

✨Submit Your Talk Proposals!

You can apply here - hurry, the CFP will close soon! 😊

❤️Share is much appreciated

We aim that the talks will help to share knowledge as much as possible, so if you know someone that has a cool topic let them know about our CFP!

Seen you soon!

Vue Vixens Japan は Front-End Foxes Japan へ

Nahoko Ushirokawa — Tue, 02 Mar 2021 09:30:55 +0000

こんにちは！Vue Vixens Japan チャプターリーダーの後川菜穂子です。

Vue Vixens Japan は Vue.js を学ぶ女性をサポートするため、グローバルコミュニティ Vue Vixens のローカルチャプターの一つとして 2019 年に立ち上がりました。
これまで「女性のための女性による運営」をモットーに、初心者向けのワークショップや勉強会を実施してきました。

2019 年 10 月初回イベントの様子

2020年秋からイベント開催を一時休止していましたが、2021年3月より再開することとなりました。
このたび、より良いコミュニティを目指し、新たなスタートを切ることになりましたのでお知らせいたします。

Front-End Foxes Japan へ

チャプター名を Vue Vixens Japan から Front-End Foxes Japan に変更し、フレームワークの垣根を越えてフロントエンドを学ぶ女性を広くサポートすることを目指します。
これまでは Vue のみをテーマにしてきましたが、今後は他のフレームワークや言語も含め、フロントエンドに関わること全てを対象に活動していきます。
グローバル団体の方では既に方針変更を行っており、Japan チャプターは今回そちらに追随する形となります。
以前よりも広い範囲の題材を扱うことになりますが、コアメンバーにも Vue 好きのエンジニア・デザイナーが多く、参加者からももっと学びたいとご意見をいただいたため、今後も機会があれば Vue を中心としたイベントも開催したいと思っています。

イベント形式の方針変更

今までは、学びをサポートするための最も直接的な方法として、少人数で会場に集まって丁寧に教える、といった内容のワークショップを中心にイベントを執り行ってきました。
しかし、昨今はオンサイトでのイベント開催が困難になり、オンラインでの活動に移行しています。
オンラインでのワークショップを何度か試みましたが、リモート環境で細やかにサポートするためには様々なイレギュラーに備えて体制を準備しておく必要があることを知りました。
これからはより多くの女性を継続的にサポートすることを目指すため、ワークショップのみに拘らず、ミートアップ・トークセッションや配信型のイベントも積極的に計画していきます。

なお、「女性のための女性による運営」という方針はこれからも変わりません。
女性が安心して自主的に学べる場を提供するため、今後も改善を重ねていきます。

興味のある方は、ぜひこちらから Slack ワークスペースにご参加いただき、 #chapter-frontendfoxes-jp チャンネルに入ってみてください！

Front-End Foxes Japan に関するご質問やご相談がありましたら @nahokomatsui にご連絡ください。

🛍️ Build a commerce storefront

jaepass — Tue, 20 Oct 2020 02:22:59 +0000

Project Goal: Build an e-commerce web store with a products listing.

What you’ll learn: Setting up your React app, API basics, React components basics, fetch and display products data from an external API.

Tools you’ll need: A modern browser like Chrome to access CodeSandbox - be sure to create an account in CodeSandbox to keep the versions of your work intact.

Time needed to complete: 30 minutes
Just want to try the app?: CodeSandbox link

The main objective here is to learn React fundamentals in conjunction with working with an API to build an e-commerce application! We're going to create a real-world app fetching data from an external API to list products in a product catalogue page! We're really excited so let's get right to it!

Here is a summary of what we will achieve!

Go over React basics
Create components in React
Fetch data from an external API data source called Chec
Use an axios-based library, Commerce.js, to add eCommerce logic
List products on a products catalogue page

Check out this live demo sneakpeek to have a look at what we're building today!

Prerequisites

This project assumes you have some knowledge of the below concepts before starting:

Some basic knowledge of JavaScript fundamentals
Some basic knowledge of JavaScript frameworks
An idea of the JAMstack architecture and how APIs work

Getting Started

We mentioned you needing Code Sandbox above, so what exactly is it? Codesandbox is an online IDE (Integrated Development Environment) playground that allows you to develop your project easily in the browser without having to set up your development environment.

So that's exactly what we're going to do. Head on over to CodeSandbox and create your account if you haven't already. Create a CodeSandbox account and scaffold a starter React template by clicking here. Choosing a React template in codesandbox or downloading it as a dependency is the same idea as installing create-react-app and getting a starting boilerplate of a single page application. You can read more about Create React App here.

Basic React App Structure:

In most cases when you scaffold a React project, a typical project structure would look like this.

my-app/
- README.md
- node_modules/
- package.json
- public/
- index.html
- favicon.ico
- src/
- App.css
- App.js
- App.test.js
- index.css
- index.js
- logo.svg

The public folder contains our assets, html static files and custom client side javascript files. package.json is used by npm (Node package manager) to save all the packages needed to deploy our app, but we don't have to worry about this because CodeSandbox installs and updates this file for us.

In our public, we have a standard html file called index.html. This is our point of entry file where we have our root element, which is named by convention. If you scroll down to line 30 in the body element, you will see <div id="root"></div>. This is the root element where we will be injecting our application.

The src folder contains all our React code and houses our index.js, app.js and later on our components when we start to create them. The fileindex.js is opened by default. You will see something like this:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Here we import the React library and we use the ReactDOM render() method in order to print the contents of our App component into the root div in our index.html that we specified above. Our main app component App.js has to be imported as well to be included in the render. The App.js component is passed in as the first argument in the render function and the rootElement as the second argument. That will tell React to render the app component and transform it into an element using the React.createElement method at build time to the index page. We will be stripping out all the scaffolded code in the component App.js and rebuilding later on.

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

The App function in App.js represents a React component. You can create your components as a individual files (Single File Component - SFC). In React, html-like tags which are what we call JSX can be passed in the render function and be returned. The JSX inside the return function is what the App.js will render out.

💡 Tip

What are Components?

Components sections of your application that you extract out
into separate files so that you can make them reusable. There are two types of components, functional components and class components. We will get into these different components a bit more later in the tutorial.

Now that we've walked through the starting structure in a React application, this is where the real fun begins. As you know we will be building a real-world e-commerce application sourcing data from an API data source. In order to do that, we will need to install a package dependency. So lets get right to it!

Install our commerce API

We will be using a commerce API platform to source our products data. The commerce backend we will be using is called Chec and it comes with the handy Commerce.js SDK packed with helper functions to handle our commerce logic in the frontend seamlessly.

💡 Tip

What are APIs and SDKs?

API stands for Application Programming Interface and acts as a "contract" between client and server. The client which is a browser or any front-facing layer makes a request to a server to receive a response or initiate a defined action. When a platform has an API, it allows a software or front-facing client to interact with its data. SDK stands for Software Development Kit and is a installable package of development tools that typically comes with a library, a debugger, and other common tooling.

In a standard local development environment, the Chec/Commerce.js SDK can be installed in two ways:

Install the package via package manager either with npm npm install @chec/commerce.js or yarn yarn @chec/commerce.js
Install via CDN by included this script <script type="text/javascript" src="https://cdn.chec.io/v2/commerce.js"></script> in the index.html file.

Since we are using Codesandbox, we can conveniently add a dependency on the left sidebar. So let's go ahead and do that! Click on Add dependency and in the search field type in @chec/commerce.js and select the option which is the latest 2.1.1 version.

💡 Tip

The Commerce.js SDK is using the axios library under the hood. Axios is a promise-based HTTP client that works both in the browser and in other node.js environments.

Link up our Commerce instance

The Commerce.js SDK comes packed with all the frontend oriented functionality to get a customer-facing web-store up and running. In order to utilize all the features of this commerce platform's SDK, we are going to import the module into a folder called lib so that we can have access to our Commerce object instance throughout our application.

Let's go ahead and do that right now! In your src directory, we'll create a new folder called lib, create a file commerce.js and copy and paste the below code in it. Typically a lib folder in a project stores files that abstracts functions or some form of data.

// src/lib/Commerce.js
import Commerce from '@chec/commerce.js';
export const commerce = new Commerce('pk_17695092cf047ebda22cd36e60e0acbe5021825e45cb7');

Ok so what have we done here? First we import in the Commerce.js module which we will be using to communicate with the API platform, then we export an instance of Commerce and pass in a public key. The public key is needed to give us access to data in the Chec API.

💡 **Tip

Please note that for the purpose of getting you up and running with an account with products data, a public key is provided from a demo merchant account. A token key acess is what gives the API an authentication scope. A public key will give us access to Chec's core API resources such as your products and cart data.

Now that we've installed our commerce SDK and created our Commerce instance, we now have access to the Commerce object throughout our application!

Make your first request to fetch the products data

Commerce.js was built with all the frontend functionalities you would need to build a complete eCommerce store. All you need to do is make requests to various Chec API endpoints, receive successful responses, then you have your raw data to output beautifully onto your web store.

One of the main resources in Chec is the Products endpoint. Commerce.js
makes it seamless to fetch product data with its promise-based
method commerce.products.list(). This request would make a
call to the GET v1/products API endpoint and return a list of product data. Open up your App.js file and delete the code that came with creating a new React app and we will write this file from scratch.

Import commerce as well as a ProductsList component which you'll create in the next
section. While there, initialize an empty array products state in your constructor.

// src/App.js
import React, { Component } from 'react';
import { commerce } from './lib/commerce';
import ProductsList from './components/ProductsList';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
    }
  }
  render() {
    return (
      <div className="app">
      </div>
    );
  }
};
export default App;

In React, when a component is created, the constructor is the first method called. Initializing your state in the constructor will allow you to store data on the component's instance when it's created. We also need to pass props in as a parameter in the the constructor method and call the super() method in order to make the this.props object available. The super() method then calls the constructor of the parent class which is our class component in this case. You'll initialize products
as an empty array in your app to be able to store the product data later on.

💡 Tip

The constructor method in a React class component gets called before the component gets mounted and helps to initialize local states or bind event handlers in the object you're creating. You would only need to define a constructor if you need to maintain some form of state in your React component.

You will be creating the products components as stateful components. This means that the components has the ability to keep track of changing data. You might ask why would be want to keep track of changing data. Any commerce store needs to have the ability to update its products listing in real-time. Be it new products being added, products being sold out, or products being taken off. The API data constantly will get updated, therefore the UI has to be reactive.

You can now make your first Commerce.js request! Create a function called fetchProducts() in the component and make a request to the products endpoint using the Commerce.js method commerce.products.list().

/**
 * Fetch products data from Chec and stores in the products data object.
 * https://commercejs.com/docs/sdk/products
 */
fetchProducts() {
  commerce.products.list().then((products) => {
    this.setState({ products: products.data });
  }).catch((error) => {
    console.log('There was an error fetching the products', error);
  });
}

Inside the function, use the commerce object to access the products.list() method for access to product data. commerce.products.list() is a
promise-based function call that will resolve the request and then() sets the response data with this.setState() into
the products state key created earlier in the component's constructor. The catch() method catches any errors in the
case that the request to the server fails.

Of course simply creating the function does not do anything as you have yet to call this function. When the app
component mounts to the DOM, use the lifecycle hook componentDidMount() to fetch your data. It is a React lifecycle method that helps to call functions when the component first mounts to the DOM. Since we are loading data from a remote endpoint, we want to invoke the fetchProducts() function to update the state with the returned products products so that we can render our updated data.

componentDidMount() {
  this.fetchProducts();
}

Speaking of render, you are going to need one of the core React functions render(). Without render() and a return statement, nothing
would get logged onto your frontend. Below is the expected returned data (abbreviated):

[
  {
    "id": "prod_NqKE50BR4wdgBL",
    "created": 1594075580,
    "last_updated": 1599691862,
    "active": true,
    "permalink": "TSUTww",
    "name": "Kettle",
    "description": "<p>Black stove-top kettle</p>",
    "price": {
      "raw": 45.5,
      "formatted": "45.50",
      "formatted_with_symbol": "$45.50",
      "formatted_with_code": "45.50 USD"
    },
    "quantity": 0,
    "media": {
      "type": "image",
      "source": "https://cdn.chec.io/merchants/18462/images/676785cedc85f69ab27c42c307af5dec30120ab75f03a9889ab29|u9 1.png"
    },
    "sku": null,
    "meta": null,
    "conditionals": {
      "is_active": true,
      "is_free": false,
      "is_tax_exempt": false,
      "is_pay_what_you_want": false,
      "is_quantity_limited": false,
      "is_sold_out": false,
      "has_digital_delivery": false,
      "has_physical_delivery": false,
      "has_images": true,
      "has_video": false,
      "has_rich_embed": false,
      "collects_fullname": false,
      "collects_shipping_address": false,
      "collects_billing_address": false,
      "collects_extrafields": false
    },
    "is": {
      "active": true,
      "free": false,
      "tax_exempt": false,
      "pay_what_you_want": false,
      "quantity_limited": false,
      "sold_out": false
    },
    "has": {
      "digital_delivery": false,
      "physical_delivery": false,
      "images": true,
      "video": false,
      "rich_embed": false
    },
    "collects": {
      "fullname": false,
      "shipping_address": false,
      "billing_address": false,
      "extrafields": false
    },
    "checkout_url": {
      "checkout": "https://checkout.chec.io/TSUTww?checkout=true",
      "display": "https://checkout.chec.io/TSUTww"
    },
    "extrafields": [],
    "variants": [],
    "categories": [
      {
        "id": "cat_3zkK6oLvVlXn0Q",
        "slug": "office",
        "name": "Home office"
      }
    ],
    "assets": [
      {
        "id": "ast_7ZAMo1Mp7oNJ4x",
        "url": "https://cdn.chec.io/merchants/18462/images/676785cedc85f69ab27c42c307af5dec30120ab75f03a9889ab29|u9 1.png",
        "is_image": true,
        "data": [],
        "meta": [],
        "created_at": 1594075541,
        "merchant_id": 18462
      }
    ]
  },
]

The data object contains all the property endpoints such as the product name, the product description, product price or any uploaded variants or assets. This data is exposed when you make a request to the API. As mentioned above, Commerce.js is a Software Development Kit(SDK) that comes with abstracted axios promise-based function calls that will help to fetch data from the endpoints. The public key access that we briefed over above is a public token key from a merchant store. This account already has products and products information uploaded to the Chec dashboard for us to run a demo store with.

Now add the empty <ProductsList /> component to your render function:

render() {
  const { products } = this.state;
  return (
    <div className="app">
      <ProductsList />
    </div>
  );
}

Destructure products from state to make it a little cleaner. You'll need to pass the products property as an argument
to your ProductsList component. This means that the value of the ProductsList component's prop
products will be resolved from the parent (App) component's state, and will update automatically whenever it changes.

Start to style your components

Before we go any further, let's start to port in some styles so we can start to make our UI look slick! We will be using SCSS, a CSS style compiler to style our application. Please note that we will not be going into styling details but will only go over the high-level of porting in the styles. First install node-sass by adding it as a dependency in the left sidebar or alternatively in a local environment by running the command below.

yarn add node-sass
# OR
npm install node-sass

Next, let's go ahead and create a styles folder with a scss folder inside. Inside of the scss folder, create two other folders named components and global. Lastly, still in the scss folder, create a file and name it styles.scss. This file is where we will import in all our components and global styles. Your styles structure should look like the below tree.

src/
- styles/
- components/
- global/
- styles.scss

In the components folder, create a file named _products.scss and copy in the below code.

/* _products.scss */
.products {
    display: block;
    margin: 3rem;
    @include md {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 10rem;
    }
    .product {
        &__card {
            width: 55%;
            margin: auto;
            margin-top: 0;
            margin-bottom: 0;
            padding-bottom: 2rem;
        }
        &__image {
            border: 2px solid $text-primary;
            width: 90%;
        }

        &__name {
            color: $text-primary;
            padding-top: 1rem;
            padding-bottom: 0.25rem;
        }

        &__details {
            display: flex;
            justify-content: space-between;
            margin-top: 0.75rem;
        }

        &__price {
            align-self: center;
            margin: 0;
            color: $text-grey;
        }


        &__details {
            display: flex;
            justify-content: space-between;
        }

        &__btn {
            background: $color-accent;
            color: white;
            font-size: 0.75rem;
            text-transform: uppercase;
            padding: 0.5rem 1rem;
            transition: all 0.3s ease-in-out;
            margin-top: 1rem;
            border: none;

            &:hover {
                background-color: lighten(#EF4E42, 5);
            }
            @include sm {
                margin-top: 0;
            }
        }
    }
}

Now in the global folder, create _base.scss, _body.scss and _mixins.scss and copy in the respective code below.

/* _base.scss */
// Font styles
$font-primary: 'Amiko', sans-serif;
$font-secondary: 'Adamina', serif;
// Colors
$bg-color: #E8E2D7;
$text-primary: #292B83;
$text-grey: rgb(67, 67, 67);
$color-accent: #EF4E42;
// Media query sizes
$sm-width: 576px;
$md-width: 768px;
$lg-width: 992px;
$xl-width: 1200px;

/* _body.scss */
body {
  font-family: $font-primary;
  background-color: $bg-color;
}

/* _mixins.scss */
@mixin small-xs {
  @media (max-width: #{$sm-width}) {
    @content;
  }
}
@mixin sm {
  @media (min-width: #{$sm-width}) {
    @content;
  }
}
@mixin md {
  @media (min-width: #{$md-width}) {
    @content;
  }
}
@mixin lg {
  @media (min-width: #{$lg-width}) {
    @content;
  }
}
@mixin xl {
  @media (min-width: #{$xl-width}) {
    @content;
  }
}
@mixin md-max {
  @media (max-width: #{$lg-width}) {
    @content;
  }
}

Lastly as mentioned, you'll need to now import those created files in the style index styles.scss.

@import "global/base";
@import "global/body";
@import "global/mixins";
@import "components/product";

Now that all the styles are written and imported, you should start to see the styles pull through when you render your components later.

Create our product item component

The nature of React and most modern JavaScript frameworks is to separate your code into components. Components are a way to encapsulate a group of elements for reuse throughout your application. You'll be creating two components for products, one will be for the single product item and another for the list of product items.

Start by creating a class component and name it ProductItem.js in src/components. This component will render the individual product card. In your render function destructure product from your props. You will reference this
property to access each product's image, name, description, and price via .media.source, .name, .description and .price in the return statement.

Product descriptions return HTML. To strip HTML from the product description string, using this string-strip-html handy library will do the trick. Install this library by running yarn add string-strip-html or npm i string-strip-html. After installing, import the module in and pass in the product description to the stripHtml function.

import React, { Component } from "react";
import stripHtml from 'string-strip-html';
class ProductItem extends Component {
  render() {
    const { product } = this.props
    const { result } = stripHtml(product.description);
    return (
      <div className="product__card">
        <img className="product__image" src={product.media.source} alt={product.name} />
        <div className="product__info">
          <h4 className="product__name">{product.name}</h4>
          <p className="product__description">
            {/* product description stripped of html tags */}
            {result}
          </p>
          <div className="product__details">
            <p className="product__price">
            {product.price.formatted_with_symbol}
            </p>
          </div>
        </div>
      </div>
    );
  }
};
export default ProductItem;

As you saw earlier in the abbreviated JSON, the returned product data object comes with all the information that you
need to build a product listing view. In the code snippet above, your product prop is being used to access the various
properties. First, render an image tag with the src value of product.media.source as the values inside the curly
braces dynamically binds to the attributes.

Create our products list component

It's now time to create a ProductsList.js component inside src/components. The ProductsList component will be another
class component which will loop through and render a list of ProductItem components.

First, import in the ProductItem component. Next, define a products prop. This will be provided by the parent component.

In your return statement you need to use the map function
to render a ProductItem component for each product in your products prop. You also need to pass in a unique identifier (product.id) as the key attribute - React will use it to determine which items in a list have changed and which parts of your application need to be re-rendered.

import React, { Component } from 'react';
import ProductItem from './ProductItem';
class ProductsList extends Component {
  render() {
    const { products } = this.props;
    return (
      <div className="products">
        {products.map((product) => (
          <ProductItem
            key={product.id}
            product={product}
          />
        ))}
      </div>
    );
  }
}
export default ProductsList;

This component will be a bit bare-boned for now except for looping through a ProductItem component.

With both your product item and list components created, go back to App.js to render the <ProductsList /> and pass in the products prop with the returned product data as the value.

import React, { Component } from 'react';
import { commerce } from './lib/commerce';
import ProductsList from './components/ProductsList';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
    }
  }
  componentDidMount() {
    this.fetchProducts();
  };
  /**
   * Fetch products data from Chec and stores in the products data object.
   * https://commercejs.com/docs/sdk/products
   */
  fetchProducts() {
    commerce.products.list().then((products) => {
      this.setState({ products: products.data });
    }).catch((error) => {
      console.log('There was an error fetching the products', error);
    });
  }
  render() {
    const { products } = this.state;
    return (
      <div className="app">
        <ProductsList
          products={products}
        />
      </div>
    );
  }
};
export default App;

Conclusion

Awesome, there you have it! You have just created an e-commerce React application listing products on from an API backend! The next steps would be to add cart and checkout functionality to your application. Stay tuned for follow up workshops!

Author

Made with ❤️ by Jaeriah Tay

Integrating Vue CLI 3 with Kendo UI

Super Diana — Fri, 27 Sep 2019 01:51:51 +0000

Walk through the integration process of the new Vue CLI 3 with Kendo UI, and start developing eye-catching Vue.js applications with zero hassle!

Original Post on The Telerik Blog. October 2018

Kendo UI is an awesome UI component library made by Progress. It can be used with multiple frameworks/tools (jQuery, React, Angular), but let's talk about using it with Vue.js.

We will go through the integration process explaining it step by step and solving a few issues that may occur while integrating Kendo UI with Vue CLI 3. For this, we're going to use our "Vuetiful" Rick & Morty app as an example.

For those who haven't updated to Vue CLI 3 yet, you can check out this blog post on what you need to know, and I recommend reading the official documentation to learn the proper usage of this awesome tool.

Assuming we have previously installed Vue CLI 3 let's create our project and enter its root folder:

vue create ricknmorty-vue
cd /ricknmorty-vue

Install Kendo UI Using npm

Installing:

npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default

For our app, we used the default theme, but among the many possibilities to get your apps rocking and looking like a million bucks, you can build your own theme, or use the default, bootstrap or material theme. Check out the Theme Builder!.

For example, for our Vuetiful Rick & Morty we used buttons:

npm install --save @progress/kendo-buttons-vue-wrapper

You can head over to the Kendo UI for Vue site for more details on themes and components.

Once we have installed all necessary packages, we shall proceed with the integration:

Open main.js
Let's import our magic adding the following to our code:

import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'

Add the minimum base pack to our project and, for this particular case, adding buttons:

import { ButtonsInstaller } from '@progress/kendo-buttons-vue-wrapper'

Vue.use (ButtonsInstaller)

So now we can create our component using Kendo UI's buttons!

In our component:

import { Button } from '@progress/kendo-buttons-vue-wrapper'

Let's add it to our component list:

components: {
  Button
}

And we can now use: <kendo-button></kendo-button>. For example:

<kendo-button class="button" icon="arrow-right" @click="position++"></kendo-button>

You can get more information about buttons here.

Once we have finished our development, let's go to our terminal and use npm to run our project, just as shown in the Vue CLI 3 documentation:

To run our project type:

npm run serve

And this will trigger the following warning:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

What just happened?!

Don't sweat it! This can happen often with some Vue.js components and it can be fixed by adding a simple line of code inside of: webpack.config.js

But wait a minute!... Where is webpack.config.js in the new CLI?
Now it's inside of node_modules
But thou shall not ever modify node_modules!!!
That's actually true, because if you update your project, all the changes you make in node_modules will be lost.
Sooo??? I am lost!. How do I sort this out?

In the new Vue CLI 3, any new configs for webpack.config.js are applied in a single file we can create in our project root and it should be called vue.config.js.

Once we create the file, just add the following code:

const path = require('path');

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  lintOnSave: true,
  chainWebpack: (config) => {
    config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
  }
}

And voila!!!! It's all running smoothly!!