Add Vue blog example

README.md

@@ -1,6 +1,4 @@
-<center>
-    <h1>Directus Examples</h1>
-</center>
+<h1 align="center">Directus Examples</h1>
 
 <p align="center">
     <a href="https://directus.io"><img src="https://img.shields.io/static/v1?style=flat-square&logo=Directus&logoColor=white&label=Directus&message=directus.io&color=4466ff" alt="Directus Website" /></a>
@@ -9,15 +7,24 @@
     <a href="https://directus.chat"><img src="https://img.shields.io/static/v1?style=flat-square&logo=Discord&logoColor=white&label=Discord&message=Join%20us&color=5865f2" alt="Directus Discord Server" /></a>
  </p>
 
-These examples showcases various integrations with different frameworks using [Directus](https://github.com/directus/directus) as the data source to build a simple blog.
+These examples showcases various integrations with different frameworks using [Directus](https://github.com/directus/directus) as the data source.
 
-## Integrations
+## 🔌 Integrations
 
-| <img height="64" src="./shared/logo/astro.svg#gh-light-mode-only" /><img height="64" src="./shared/logo/astro-dark.svg#gh-dark-mode-only" /><br />Astro<br />(Beta) | <img height="62" src="./shared/logo/eleventy.svg" /><br />Eleventy<br />v1 | <img height="60" src="./shared/logo/gatsby.svg" /><br />Gatsby<br />4 | <img height="62" src="./shared/logo/nextjs.svg#gh-light-mode-only" /><img height="60" src="./shared/logo/nextjs-dark.svg#gh-dark-mode-only" /><br />Next.js<br />12 | <img height="64" src="./shared/logo/nuxtjs.svg" /><br />Nuxt.js<br />2 | <img height="56" src="./shared/logo/remix.svg#gh-light-mode-only" /><img height="54" src="./shared/logo/remix-dark.svg#gh-dark-mode-only" /><br />Remix<br />v1 | <img height="64" src="./shared/logo/svelte.svg" /><br />SvelteKit<br />(Beta) |
-| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------: | :-------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
-|                                                                           [view](/astro)                                                                            |                             [view](/eleventy)                              |                            [view](/gatsby)                            |                                                                           [view](/nextjs)                                                                           |                            [view](/nuxtjs)                             |                                                                         [view](/remix)                                                                          |                              [view](/sveltekit)                               |
+|                                                                      Logo                                                                      | Framework                                               |    Blog Example    |
+| :--------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------- | :----------------: |
+|  <img height="32" src="./shared/logo/astro.svg#gh-light-mode-only" /><img height="32" src="./shared/logo/astro-dark.svg#gh-dark-mode-only" />  | **[Astro `beta`](https://github.com/withastro/astro)**  |   [view](/astro)   |
+|                                              <img height="32" src="./shared/logo/eleventy.svg" />                                              | **[Eleventy `v1.0`](https://github.com/11ty/eleventy)** | [view](/eleventy)  |
+|                                               <img height="32" src="./shared/logo/gatsby.svg" />                                               | **[Gatsby `v4`](https://github.com/gatsbyjs/gatsby)**   |  [view](/gatsby)   |
+| <img height="32" src="./shared/logo/nextjs.svg#gh-light-mode-only" /><img height="32" src="./shared/logo/nextjs-dark.svg#gh-dark-mode-only" /> | **[Next.js `v12`](https://github.com/vercel/next.js)**  |  [view](/nextjs)   |
+|                                               <img height="36" src="./shared/logo/nuxtjs.svg" />                                               | **[Nuxt.js `v2`](https://github.com/nuxt/nuxt.js)**     |  [view](/nuxtjs)   |
+|  <img height="32" src="./shared/logo/remix.svg#gh-light-mode-only" /><img height="32" src="./shared/logo/remix-dark.svg#gh-dark-mode-only" />  | **[Remix `v1`](https://github.com/remix-run/remix)**    |   [view](/remix)   |
+|                                               <img height="32" src="./shared/logo/svelte.svg" />                                               | **[SvelteKit `beta`](https://github.com/sveltejs/kit)** | [view](/sveltekit) |
+|                                                <img height="32" src="./shared/logo/vue.svg" />                                                 | **[Vue `v3`](https://github.com/vuejs/core)**           |  [view](/vue) <sup>[1]</sup>  |
 
-## Links
+_[1]: These additionally uses full read permissions on `articles` & `directus_users` in Public role for simplicity sake._
+
+## 🔗 Links
 
 - ✨ Official Website - [https://directus.io](https://directus.io)
 - 📘 Documentation - [https://docs.directus.io](https://docs.directus.io)

shared/seed/src/data/permissions.ts

@@ -1,8 +1,8 @@
-import pupa from "pupa";
 import { directus } from "../directus";
 import { logger } from "../logger";
+import { getArgv } from "../utils/get-argv";
 
-const permissionsData = [
+const basePermissions = [
   {
     role: null,
     collection: "directus_files",
@@ -11,9 +11,33 @@ const permissionsData = [
   },
 ];
 
+// SPA examples require read permission to Public role
+const spaPermissions = [
+  {
+    role: null,
+    collection: "articles",
+    action: "read",
+    fields: "*",
+  },
+  {
+    role: null,
+    collection: "directus_users",
+    action: "read",
+    fields: "*",
+  },
+];
+
 export async function seedPermissions() {
   logger.info("Seeding permissions...");
 
+  let permissionsData = basePermissions;
+
+  const argv = getArgv();
+  const spaProjects = ["Vue"];
+  if (argv.project && spaProjects.includes(argv.project)) {
+    permissionsData = permissionsData.concat(spaPermissions);
+  }
+
   await directus.permissions.createMany(permissionsData);
 
   logger.info("Seeding permissions completed.");

shared/seed/src/env.ts

@@ -1,30 +1,31 @@
 import { logger } from "./logger";
 import { getArgv } from "./utils/get-argv";
 
-const argv = getArgv();
+function verifyEnvironmentVariables(variableNames: string[]) {
+  for (const variableName of variableNames) {
+    if (variableName in process.env) continue;
 
-if (argv.project === "Gatsby") {
-  if (!process.env.GATSBY_DIRECTUS_URL) {
-    logger.error(`GATSBY_DIRECTUS_URL environment variable is missing.`);
-    process.exit(1);
-  }
-} else if (argv.project === "Astro") {
-  if (!process.env.PUBLIC_DIRECTUS_URL) {
-    logger.error(`PUBLIC_DIRECTUS_URL environment variable is missing.`);
-    process.exit(1);
-  }
-} else if (argv.project === "SvelteKit") {
-  if (!process.env.VITE_DIRECTUS_URL) {
-    logger.error(`VITE_DIRECTUS_URL environment variable is missing.`);
-    process.exit(1);
-  }
-} else {
-  if (!process.env.DIRECTUS_URL) {
-    logger.error(`DIRECTUS_URL environment variable is missing.`);
+    logger.error(`${variableName} environment variable is missing.`);
     process.exit(1);
   }
 }
 
+const argv = getArgv();
+
+switch (argv.project) {
+  case "Astro":
+    verifyEnvironmentVariables(["PUBLIC_DIRECTUS_URL"]);
+  case "Gatsby":
+    verifyEnvironmentVariables(["GATSBY_DIRECTUS_URL"]);
+    break;
+  case "SvelteKit":
+  case "Vue":
+    verifyEnvironmentVariables(["VITE_DIRECTUS_URL"]);
+    break;
+  default:
+    verifyEnvironmentVariables(["DIRECTUS_URL"]);
+}
+
 if (
   argv.project === "Astro" &&
   !process.env.PUBLIC_DIRECTUS_STATIC_TOKEN &&
@@ -46,25 +47,22 @@ if (
   process.exit(1);
 }
 
-export const env = {
-  url:
-    argv.project === "Gatsby"
-      ? process.env.GATSBY_DIRECTUS_URL
-      : argv.project === "Astro"
-      ? process.env.PUBLIC_DIRECTUS_URL
-      : argv.project === "SvelteKit"
-      ? process.env.VITE_DIRECTUS_URL
-      : process.env.DIRECTUS_URL,
-  email:
-    argv.project === "Astro"
-      ? process.env.PUBLIC_DIRECTUS_EMAIL
-      : process.env.DIRECTUS_EMAIL,
-  password:
-    argv.project === "Astro"
-      ? process.env.PUBLIC_DIRECTUS_PASSWORD
-      : process.env.DIRECTUS_PASSWORD,
-  staticToken:
-    argv.project === "Astro"
-      ? process.env.PUBLIC_DIRECTUS_STATIC_TOKEN
-      : process.env.DIRECTUS_STATIC_TOKEN,
-};
+export const env =
+  argv.project === "Astro"
+    ? {
+        url: process.env.PUBLIC_DIRECTUS_URL,
+        email: process.env.PUBLIC_DIRECTUS_EMAIL,
+        password: process.env.PUBLIC_DIRECTUS_PASSWORD,
+        staticToken: process.env.PUBLIC_DIRECTUS_STATIC_TOKEN,
+      }
+    : {
+        url:
+          argv.project === "Gatsby"
+            ? process.env.GATSBY_DIRECTUS_URL
+            : argv.project === "SvelteKit"
+            ? process.env.VITE_DIRECTUS_URL
+            : process.env.DIRECTUS_URL,
+        email: process.env.DIRECTUS_EMAIL,
+        password: process.env.DIRECTUS_PASSWORD,
+        staticToken: process.env.DIRECTUS_STATIC_TOKEN,
+      };

vue/.env.example

@@ -0,0 +1,6 @@
+VITE_DIRECTUS_URL=http://localhost:8055
+
+# Only used for seeding, not in the app
+DIRECTUS_EMAIL=
+DIRECTUS_PASSWORD=
+DIRECTUS_STATIC_TOKEN=

vue/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

vue/README.md

@@ -0,0 +1,50 @@
+# Directus Vue Example
+
+This is a [Vue 3](https://v3.vuejs.org) project bootstrapped with [`create-vue`](https://github.com/vuejs/create-vue).
+
+## 📌 Prerequisites
+
+- A new Directus instance ([Installation guide](https://docs.directus.io/getting-started/installation/))
+
+## 🚀 Getting Started
+
+1. Clone this repo.
+
+2. Install dependencies for this example.
+
+   ```shell
+   cd vue
+   npm install
+   ```
+
+3. Create a `.env` file based on the provided `.env.example` file. You can use either the credentials (email & password) or static token of the admin account.
+
+4. Apply the provided `example.yaml` schema onto your Directus instance. [Learn more here](https://docs.directus.io/reference/cli/#applying-a-snapshot)
+
+5. Insert seed data to your Directus instance.
+
+   > ⚠ If you had inserted seed via other project examples, make sure that the Public role has been granted **full read permission** to both `articles` & `directus_users` for this example to work properly.
+
+   ```shell
+   npm run seed
+   ```
+
+6. Start the development server.
+
+   ```shell
+   npm run dev
+   ```
+
+   Your Directus Vue example is now running at <http://localhost:3000>.
+
+## 🔗 Links
+
+### Directus
+
+- [Official Site](https://directus.io/)
+- [Documentation](https://docs.directus.io/)
+
+### Vue
+
+- [Official Site](https://v3.vuejs.org)
+- [Documentation](https://v3.vuejs.org/guide/introduction.html)

vue/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Directus Vue Example</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

vue/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}