Nuxt frontend, loadanje iz APIja, sample glava in prva stran

README.md

@@ -25,3 +25,21 @@ Osnovne podatke pa vnesemo z ukazuma:
 Sajt je dostopen preko naslova: https://yufu-manifest.ddev.site/
 
 Lahko pa napišemo tudi `ddev launch`
+
+### Postavitev (vuejs) "prednjegadela"
+
+Najprej gremo v podfolder `nuxt` in namestimo odvisne javascript pakete:
+
+`cd nuxt`
+
+`npm i`
+
+Skopiramo privzete nastavitve v dejavne:
+
+`cp .env.dist .env`
+
+Po potrebi vsebino `.env` prilagodimo.
+
+Nato poženemo izgrajevalnik / strežnik:
+
+`npm run dev`

nuxt/.env.dist

@@ -0,0 +1,3 @@
+BASE_URL="https://yufu-manifest.ddev.site"
+JSONAPI_PATH="/jsonapi"
+FILE_PATH="/sites/default/files"

nuxt/app.vue

@@ -1,5 +1,8 @@
 <template>
   <div>
     <Glava />
+    <section class="body">
+      <NuxtPage />
+    </section>
   </div>
 </template>

nuxt/components/Glava.vue

@@ -1,7 +1,9 @@
 <script setup="setup">
+  const api = useApi()
+
   onMounted(() => {
     if (window) {
-      window.api = useApi()
+      window.api = api
     }
   })
 </script>

nuxt/composables/api.js

@@ -1,8 +1,32 @@
-// import { DruxtClient } from 'druxt'
+import jsonapi from 'jsonapi-serializer'
 
 export const useApi = () => {
-    // @TODO!!
+  const baseUrl = useRuntimeConfig().public.baseUrl
-    // const druxt = new DruxtClient('http://http://yufu-manifest.ddev.site') 
+  const jsonapiPath = useRuntimeConfig().public.jsonapiPath
-    // console.log(druxt)
+
-    //return druxt
+  const apiBaseUrl = `${baseUrl}${jsonapiPath}`
+  const headers = {
+    'Content-Type': 'application/vnd.api+json'
+  }
+  const deserializer = new jsonapi.Deserializer({ keyForAttribute: 'camelCase' })
+  const deserialize = async (data, mapfun) => {
+    const ds = await deserializer.deserialize(data)
+    return idmap(mapfun ? ds.map(mapfun) : ds)
+  }
+
+  return {
+    baseUrl: apiBaseUrl,
+    headers,
+    deserialize
+  }
+}
+
+export const idmap = (arr, idattr = 'id') => {
+  if (!arr) { return {} }
+
+  return arr.reduce((vse, i) => {
+    const id = i[idattr]
+    vse[id] = i
+    return vse
+  }, {})
 }

nuxt/nuxt.config.js

@@ -0,0 +1,40 @@
+export default defineNuxtConfig({
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  app: {
+    head: {
+      title: '...Hm!',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { hid: 'description', name: 'description', content: '' },
+        { name: 'format-detection', content: 'telephone=no' }
+      ],
+      link: [
+        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+        { rel: 'stylesheet', type: 'text/css', href: '/css/stajl.css' }
+      ]
+    }
+  },
+  imports: {
+    dirs: ['stores']
+  },
+  modules: [
+    ['@pinia/nuxt', { autoImports: ['defineStore', 'acceptHMRUpdate']}]
+    //'nuxt-proxy'
+  ],
+  proxy: {
+    options: {
+      target: process.env.BASE_URL,
+      changeOrigin: true,
+      pathFilter:
+        process.env.FILE_PATH
+
+    }
+  },
+  runtimeConfig: {
+    public: {
+      baseUrl: process.env.BASE_URL,
+      jsonapiPath: process.env.JSONAPI_PATH,
+    }
+  },
+})

nuxt/nuxt.config.ts

@@ -1,4 +0,0 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({
-
-})

nuxt/package.json

@@ -8,9 +8,16 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "^3.2.2"
+    "nuxt": "^3.2.2",
+    "@pinia/nuxt": "^0.4.7",
+    "@nuxtjs/eslint-config": "^6.0.1",
+    "@nuxtjs/eslint-module": "^3.0.2"
   },
   "dependencies": {
-    "druxt": "^0.21.0"
+    "druxt": "^0.21.0",
+    "jsonapi-serializer": "^3.6.7",
+    "nuxt-proxy": "^0.4.1",
+    "pinia": "^2.0.32",
+    "lodash": "^4.17.21"
   }
 }

nuxt/pages/index.vue

@@ -0,0 +1,10 @@
+<script setup="setup">
+const store = useStraniStore()
+const stran = computed(() => store.strani['2a1dbd8d-1d09-4901-9b0c-d6f8c84ce213'])
+
+await store.naloziStrani()
+</script>
+
+<template>
+  <section class="stran" v-html="stran.tekst" />
+</template>

nuxt/stores/strani.js

@@ -0,0 +1,17 @@
+export const useStraniStore = defineStore('strani', {
+  state: () => ({
+    strani: {}
+  }),
+  actions: {
+    async naloziStrani () {
+      const { baseUrl, headers, deserialize } = useApi()
+
+      const data = await $fetch(`${baseUrl}/node/page`, { headers })
+      this.strani = await deserialize(data, s => ({
+        id: s.id,
+        naslov: s.title,
+        tekst: s.body.processed
+      }))
+    }
+  }
+})