Get frontend partially

.nvmrc

@@ -0,0 +1 @@
+20

README.md

@@ -1,75 +1,31 @@
-# Nuxt 3 Minimal Starter
+# Project Setup
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
+## Install Dependencies
+```zsh
+brew install yarn
+brew install nvm
+brew install --cask doppler
 ```
 
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
+## Configure Node Version
+```zsh
+nvm install
+nvm use
 ```
 
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
+## Install Packages
+```zsh
+yarn install
 ```
 
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
+## Populate .env
+```zsh
+doppler login
+doppler setup
+yarn env
 ```
 
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+## Build and run project
+```zsh
+yarn build && yarn dev
+```

graphql/queries.js

@@ -0,0 +1,39 @@
+import { gql } from 'graphql-tag'
+export const GET_ALL_ARTICLES = gql`
+    query {
+        articles {
+            data {
+                id
+                attributes {
+                    title
+                    slug
+                    summary
+                    isFeatured
+                    content
+                    createdAt
+                    updatedAt
+                    publishedAt
+                }
+            }
+        }
+    }
+`
+
+export const GET_ARTICLE_BY_SLUG = gql`
+    query getArticleBySlug($slug: String) {
+        articles(filters:{slug:{eq:$slug}}) {
+            data {
+                attributes {
+                    title
+                    slug
+                    summary
+                    isFeatured
+                    content
+                    createdAt
+                    updatedAt
+                    publishedAt
+                }
+            }
+        }
+    }
+`

nuxt.config.ts

@@ -1,12 +1,20 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true },
-  ssr: true,
-  pages: true,
-  nitro: {
-    prerender: {
-      crawlLinks: true,
-      failOnError: false,
+    modules: ['@nuxt/devtools', '@nuxtjs/apollo'],
+    devtools: {enabled: true},
+    ssr: true,
+    pages: true,
+    nitro: {
+        prerender: {
+            crawlLinks: true,
+            failOnError: false,
+        },
     },
-  },
+    apollo: {
+        clients: {
+            default: {
+                httpEndpoint: `${process.env.STRAPI_URL}${process.env.STRAPI_GRAPHQL_ENDPOINT}` || 'http://localhost:1337/graphql',
+            },
+        },
+    }
 })

package.json

@@ -12,6 +12,10 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
+    "@nuxt/types": "^2.17.2",
+    "@nuxtjs/apollo": "^5.0.0-alpha.7",
+    "graphql": "^16.8.1",
+    "graphql-tag": "^2.12.6",
     "nuxt": "^3.7.4",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"

pages/articles/[slug].vue

@@ -0,0 +1,21 @@
+<template>
+  <pre>{{response}}</pre>
+</template>
+
+<script>
+import {GET_ALL_ARTICLES} from "~/graphql/queries.js";
+
+export default {
+  data() {
+    return {
+      articles: []
+    }
+  },
+  apollo: {
+    articles: {
+      prefetch: true,
+      query: GET_ALL_ARTICLES,
+    }
+  }
+}
+</script>

pages/articles/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <pre>{{ articles }}</pre>
+  <ul>
+    <li v-for="article in articles.data" :key="article.id">
+      <NuxtLink :to="`/articles/${article.attributes.slug}`">{{ article.attributes.title }}</NuxtLink>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { GET_ALL_ARTICLES } from "~/graphql/queries";
+
+export default {
+  data() {
+    return {
+      articles: []
+    }
+  },
+  apollo: {
+    articles: {
+      prefetch: true,
+      query: GET_ALL_ARTICLES,
+    }
+  }
+}
+</script>

pages/index.vue

@@ -1,11 +1,3 @@
 <template>
-  <header>
-    <nav>
-      <ul>
-        <li><NuxtLink to="/about">About</NuxtLink></li>
-        <li><NuxtLink to="/projects/1">Project 1</NuxtLink></li>
-        <li><NuxtLink to="/projects/2">Project 2</NuxtLink></li>
-      </ul>
-    </nav>
-  </header>
-</template>
+  <NuxtLink to="/articles">Articles</NuxtLink>
+</template>

tsconfig.json

@@ -1,4 +1,4 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
 }