# Getting Started with the Kendo UI for Vue Layout Package This guide provides essential information about using the Kendo UI for Vue Layout package—you will learn how to install the package, add a PanelBar component to your project, style the component, and activate your license. The steps demonstrated in this guide are applicable to all Vue Layout components. After completing this guide, you will be able to reproduce the following example. [Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/get-started/source.txt) ## Setting Up Your Vue Project Before you install the Kendo UI for Vue Layout package, make sure that you have a running Vue project. The easiest way to set up a Vue project is to use the approach described in the [Set up the Vue project](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api#1-set-up-the-vue-project) section of the [First Steps with JavaScript ](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api) article. ## Installing the Layout Package All Kendo UI for Vue packages are distributed through npm and offer a similar installation experience. To use the `PanelBar`(for example) component, start with the installation of the Layout npm package and its [dependencies](https://www.telerik.com/kendo-vue-ui-develop/components/layout/get-started#dependencies). Use Node.js v5.0.0 or later. Navigate to the root folder of your Vue project and run the following command: ```sh npm install --save @progress/kendo-vue-layout @progress/kendo-vue-progressbars @progress/kendo-licensing @progress/kendo-vue-intl @progress/kendo-svg-icons ``` ## Importing the Components After installing the package, in the `src/App.vue` file of your Vue project, import the `PanelBar` component from the `Layout` package. ```jsx // ES2015 module syntax import { PanelBar } from "@progress/kendo-vue-layout"; ``` ```jsx // CommonJS format const { PanelBar } = require('@progress/kendo-vue-layout'); ``` If your project requires more Layout components, you can import them too. The Layout package provides the following components: * AppBar * Avatar * BottomNavigation * Breadcrumb * Card * ContextMenu * Drawer * ExpansionPanel * GridLayout * Menu * PanelBar * Splitter * StackLayout * Stepper * TabStrip * TileLayout * Wizard ## Using the Components 1. Define the PanelBar's rows as a data property. ```jsx items: [ { title: 'Competition', content: 'competitionOverview', }, { title: 'Winners', items: [ { title: 'Winners 2022' }, { title: 'Winner 2021' }, { title: 'Winner 2020' }, ], }, ], ``` 2. Add the following PanelBar definition in the `template` section of the `src/App.vue` file in your project. ```html
``` 3. To style the `PanelBar`, install and import the [Meridian theme](https://www.telerik.com/design-system/docs/themes/kendo-themes/meridian/), which is one of the [five beautiful themes](https://www.telerik.com/kendo-vue-ui-develop/components/styling) for Kendo UI for Vue. 1. Install the Meridian theme package. ```sh npm install --save @progress/kendo-theme-meridian ``` 2. Import the Theme package in `src/App.vue`. ```jsx import '@progress/kendo-theme-meridian'; ``` 4. Build, run and test the application by typing the following command in the root folder of your project: ```sh npm run dev ``` 5. Try the other Kendo UI for Vue Layout components After going through the above steps, now you can try the all Layout components by yourself. Add other components to the newly created project by [importing](https://www.telerik.com/kendo-vue-ui-develop/components/layout/get-started#importing-the-components) and then defining them in the template section. More details about how the different component can be configured you can find in each of the links in the [Suggested Links](https://www.telerik.com/kendo-vue-ui-develop/components/layout/get-started#suggested-links) section below. ## Activating Your License Key Using any of the UI components in the Kendo UI for Vue library requires either a commercial license key or an active trial license key. Follow the instructions on the [My License page](https://www.telerik.com/kendo-vue-ui-develop/components/my-license) to activate your trial or commercial license. You can skip this step if your application already contains a Kendo UI for Vue license file. ## Dependencies The Layout package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application: | Package Name | Description | | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | vue 3.0.0+ | Contains the functionality necessary to define Vue components. | | @progress/kendo-licensing | Contains the internal infrastructure related to the licensing of the Kendo UI for Vue components. | | @progress/kendo-svg-icons | Contains the SVG icons for the components | | @progress/kendo-vue-layout | Contains the Kendo UI for Vue Layout components. | | @progress/kendo-vue-intl | Contains the Internationalization package that handles the desired cultures and applies data formatting in all Kendo UI for Vue components of your project. | ## Suggested Links * [AppBar Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/appbar) * [Avatar Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/avatar) * [BottomNavigation Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/bottomnavigation) * [Breadcrumb Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/breadcrumb) * [Card Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/card) * [ContextMenu Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/context-menu) * [Drawer Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/drawer) * [ExpansionPanel Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/expansionpanel) * [GridLayout Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/gridlayout) * [Menu Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/menu) * [PanelBar Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/panelbar) * [Splitter Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/splitter) * [StackLayout Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/stacklayout) * [Stepper Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/stepper) * [TabStrip Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/tabstrip) * [TileLayout Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/tilelayout) * [Wizard Overview](https://www.telerik.com/kendo-vue-ui-develop/components/layout/wizard) * [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension) * [API Reference of the Layout Components](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api) ## Learning Resources * [Getting Started with Kendo UI for Vue suite](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api) * [Kendo UI for Vue - First Steps with JavaScript + Options API](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-options-api) * [Kendo UI for Vue - First Steps with TypeScript](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-composition-api) * [Kendo UI for Vue - First Steps with TypeScript + Options API](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-options-api) * [Kendo UI for Vue TypeScript Integration Overview](https://www.telerik.com/kendo-vue-ui-develop/components/typescript-integration) * [Kendo UI for Vue with TypeScript Virtual Classroom Tutorial](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) * [Explore the Coffee Warehouse Sample Application](https://github.com/telerik/kendo-vue/tree/master/examples-standalone/coffee-warehouse) * [Explore the GitHub Dashboard Sample Application](https://github.com/telerik/kendo-vue/tree/master/examples-standalone/dashboard) * [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension)