README.md

Kentico Cloud ❤️ Vue

This project was bootstrapped with Vue CLI using VUE UI.

How to achieve this state

1. Use @vue/cli CLI to create application skeleton

   In the target folder

   npm install -g @vue/cli
   vue create kc-vue # Use default setup
   cd  kc-vue # Use default setup

   or

   npm install -g @vue/cli
   vue ui # Use http://localhost:8000/project/ to create a new project using the UI
   cd kc-vue

2. Install Kentico Cloud JavaScript SDK

   npm install --save rxjs kentico-cloud-delivery

3. Extend Hello world component (final state)

   1. Add required imports

      import { DeliveryClient } from 'kentico-cloud-delivery';

   2. Initialize client

      const client = new DeliveryClient({
         projectId: "975bf280-fd91-488c-994c-2f04416e5ee3"
      });

   3. Define component initial data - as a function

      data: function() {
        return {
          loaded: false,
          articles: []
        };
      },

   4. Load the data to the component state using the client in component mounted hook.

      mounted: function(){
        client.items()
          .type("article")
          .getPromise()
          .then(result => {
            // eslint-disable-next-line no-console
            console.log(result.items);
            this.articles = result.items;
            this.loaded = true;
          });
      }

   5. Set the data to be rendered in the component template section using v-for

      <section v-if="loaded">
        <ul v-for="article in articles" v-bind:key="article.system.id">
          <li>{{article.elements.title.value}}</li>
        </ul>
      </section

4. Run the app

npm run serve

Hurray! Kentico Cloud ❤️ Vue!

---

---

Application documentation

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.