start

Drupal → GraphQL → Vue

Liip Lab 10.3.2020

Stefan Huber

first things first

• Join #d8-headless-challenge
• Clone and Setup gitlab.liip.ch/bazinga/shkb.next

Setup

• Backend: ./Readme.md
• Frontend: ./frontend/Readme.md

Goal

• Learn and have fun
• Fully decoupled Vue-App
• Data from Drupal via GraphQL
• Clone of shkb.ch/179-kbplus-paket

What do we have?

• Drupal 8 Backend with GraphQL-Endpoint
• Nuxt-App (Vue) with some example components

Today

• Build a Component & Fragment
• Pick a task → see also Wiki

Frontend

• Nuxt
• Apollo Client
• PostCSS

Nuxt

• Default Nuxt setup

Apollo Client

• Fetches data from Server via GraphQL
• Apollo Client (no Nuxt-Apollo)
• Preconfigured for fragments and everything...

Component

• Query/Fragment (.gql)
• Template/Style (.vue)
• Style (.css)

Let's have a look

CSS

• SCSS is powerfull but is it maintainable?
• Is CSS in JS the right thing?
• Is Helper-Classes the right thing?

SCSS

@mixin very-complex-mixin {
  ...
}

test {
  @include very-complex-mixin;
}

Styled Components

const StyledTitle = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

Tailwind

<div class="bg-white rounded-lg p-6">
</div>

vs

<div class="card card--active">
</div>

PostCSS

HTML

<div class="card card--active">
</div>

PostCSS

CSS

@import '~/components/_root/box.css';
@import '~/components/_root/colors.css';
@import '~/components/card/card-var.css';

.card {
  border-radius: $box-radius;
  height: $card-height;
}

.card--active {
  background-color: $colors--active;
}

Merci

GraphQL for PO

Liip Lab 10.3.2020

Stefan Huber

What?

Why?

Advantage

• Standard FE-Workflow (no Drupal Knowledge)
• Transitions between Pages
• Ideal for Pages with high interactions
• Ideal for Pages with State

Disadvantage

• Additional Server
• Many challenges to get feature parity with current Drupal Workflow

When?

• Pages that mostly render and don't write
• Drupal Commerce is probably not the right thing to start...

exit 0;