This document discusses using Vue.js, GraphQL, and PWA features with Craft CMS. It includes code snippets for initializing a Vue project, adding Vuetify and Apollo, defining GraphQL queries to fetch and create Craft CMS entries, deploying the project to Heroku, and adding the @vue/cli-plugin-pwa plugin to enable progressive web app capabilities.

5. CMS

8. https://trends.builtwith.com/cms/Craft

28. $ vue create postcraftvue
$ vue add vuetify
$ vue add apollo
// apollo GraphQL

29. import gql from 'graphql-tag'
//
export const ALL_CUSTOMERS = gql`
query{
customers: entries( section:[news], type:[News]) {
id
title
slug
postDate
...on News{
c_textarea01
}
}
}
`

30. <script>
import {ALL_CUSTOMERS} from "../constants/test";
export default {
name: "CustomerTable",
data: () => ({
customers: [],
headers: [
{text: 'ID', value: 'id'},
{text: ' ', value: 'title'},
],
}),
apollo: {
customers: ALL_CUSTOMERS
}
}
</script>

31. <template>
<v-app>
<CustomerTable/>
</v-app>
</template>
<script>
import CustomerTable from './components/test'
export default {
name: 'App',
components: {
CustomerTable
},
}
</script>

33. import gql from 'graphql-tag'
export const CREATE_CUSTOMER = gql`
mutation createNewEntry($title:String, $c_textarea01:String) {
upsertNews(
title:$title,
c_textarea01:$c_textarea01,
){
id
title
slug
postDate
...on News{
c_textarea01
}
}
}
`

34. // git
$ git init
$ git add .
$ git commit -m "init for heroku"
//
$ heroku create hogehoge
// heroku deploy
$ git push heroku master
//
$ heroku open

36. $ yarn add @vue/cli-plugin-pwa —dev
$ git add .
$ git commit -m "add @vue/cli-plugin-pwa"
$ vue add pwa
$ git push heroku master

38. Vue.js, GraphQL Craft CMS
https://note.mersy418.com/article/vuejs-graphql-pwa-craftcms

39. https://craft.cloud/

40. + $59/year
Pro
$299
Solo
Free
admin
+ $39/year
ECCommerce
$199-
Dev
Free
Pro
※
Lite Pro
craftcms.docker
test-foo.example.jp

43. CMS::Lover::bitpart
Update bit part, everyday!!