| class | highlighter | info | theme |
|---|---|---|---|
text-center |
shiki |
## Druxt 101
Fully Decoupled Drupal with JSON:API and Nuxt.js
Learn more at [DruxtJS.org](https://druxtjs.org)
|
./theme |
druxt-101.slides.realityloop.com
Press Space for next page
layout: image-right image: https://s.gravatar.com/avatar/499831a65f45885a7e1b70ea47c06a58?s=800
- Introduction
- Getting started using DruxtSite
- Theming with Wrappers and Slots
- Single Page Applications with Druxt components
- Entity forms and reactivity
- Static Site Generation
- #GetInvolved
- Q & A
druxt-101.slides.realityloop.com
background: https://source.unsplash.com/collection/94734566/1920x1080 class: text-center layout: cover
- Download Drupal
composer create-project -s dev \
drupal/recommended-project [DESTINATION]- Download Druxt module
composer require drupal/druxt- Quickstart
php ./web/core/scripts/drupal quick-start-
Install Druxt module: /admin/modules
-
Configure permissions: /admin/people/permissions
- Download Nuxt
npx create-nuxt-app [DESTINATION]- Download DruxtSite module
npm i druxt-site- Configure
nuxt.config.js
modules: ['druxt-site'],
druxt: {
baseUrl: 'https://example.com',
site: { theme: 'bartik' },
}npm run dev
https://gitpod.io#github.com/druxt/quickstart-druxt-site
flowchart LR
Nuxt --> DruxtSchema
Nuxt --> DruxtSite
DruxtSchema --> DruxtEntity
subgraph Layout
DruxtSite --> DruxtBlocks
DruxtBlocks --> DruxtBreadcrumb
DruxtBlocks --> DruxtMenu
DruxtBlocks --> DruxtRouter
end
subgraph Route
DruxtRouter --> DruxtEntity
DruxtRouter --> DruxtView
DruxtView --> DruxtEntity
end
<template>
<article>
<h2>{{ entity.attributes.title }}</h2>
<slot name="body" />
<AppButton :to="link" @click="onClick">Click me</AppButton>
</article>
</template>
<script>
export default {
computed: {
link: ({ entity }) => entity.attributes.path.alias || `/node/${entity.attributes.drupal_internal__nid}`,
},
methods: {
onClick() { ... }
}
}
</script>
<style scoped>
h2 {
color: #007bff;
}
</style><template>
<article v-bind="$attrs">
<h2>{{ entity.attributes.title }}</h2>
<slot name="field_image" />
<slot name="field_tags" />
<slot name="body" />
</article>
</template>
<script>
import { DruxtEntityMixin } from 'druxt-entity'
export default {
mixins: [DruxtEntityMixin],
}
</script>- $attrs: attributes / unregistered properties
- mixins: vue presets
- props: properties
- slots: template regions / data
export default {
components: true
}- Components provide
component.options - First available used
Example:
<DruxtEntity type="node--article">- DruxtEntityNodeArticleDefault.vue
- druxt/entity/node/article/Default.vue
Zero-config, auto-generated Storybook integration with Druxt modules.
- Download @nuxtjs/storybook module
npm i -D @nuxtjs/storybook postcss@latestnpx nuxt storybook
https://gitpod.io#github.com/druxt/quickstart-druxt-site
background: https://source.unsplash.com/collection/94734566/1920x1080 class: text-center layout: cover
<template>
<div>
<DruxtBlock id="umami_branding" />
<DruxtBreadcrumb />
<DruxtMenu name="main" />
<DruxtEntity type="node--article" :uuid="uuid" mode="teaser" />
<DruxtView display-id="block_1" view-id="promoted_items" />
</div>
</template><template>
<DruxtEntity
mode="default"
type="node--article"
uuid="b5cb94eb-9d14-4cea-9c3b-433ac5ebfead"
>
<template #default="article">
<h1 class="text-3xl">{{ article.entity.attributes.title }}</h1>
<DruxtEntity
type="file--file"
:uuid="article.entity.relationships.field_image.data.id"
>
<template #default="file">
<img :src="file.entity.attributes.uri.url" />
</template>
</DruxtEntity>
{{ article.entity.attributes.body.summary }}
</template>
</DruxtEntity>
</template>https://gitpod.io#github.com/druxt/quickstart-druxt-site
background: https://source.unsplash.com/collection/94734566/1920x1080 class: text-center layout: cover
<DruxtEntityForm
type="contact_message--feedback_form"
/><template>
<div>
<DruxtEntity v-bind="props" v-model="model">
<DruxtEntityForm v-bind="props" v-model="model">
</div>
</template>
<script>
export default {
data: () => ({
model: null,
props: { type: 'node--article', uuid: '...' }
}),
}
</script>https://gitpod.io/#github.com/Decipher/example-druxt-blog
- Configure
nuxt.config.js
target: 'static',
ssr: true,
// optional.
generate: {
routes: ['/', '/en', '/es'],
}-
npm run generate -
(optional)
npm start
background: https://source.unsplash.com/collection/94734566/1920x1080 class: text-center layout: cover
Every Wednesday
09:00 - ~17:00 AEDT
(22:00 - ~06:00 UTC)
Docs:
Mono-repo:
Support:
::right::
Projects:
- drupal.org/project/decoupled_router
- drupal.org/project/decoupled_menus_initiative
- drupal.org/project/druxt
- drupal.org/project/jsonapi_hypermedia
- drupal.org/project/jsonapi_menu_items
- drupal.org/project/jsonapi_resources
- drupal.org/project/jsonapi_views
Slack:
- #contenta
- #decoupled
- #decoupled-menu-initiative
