2

Newbie to the world of vueJS and Directus. Learning my way through things by going through the online documentation. Still looking for a decent tutorial showing step by step instructions on how to access a remote install of Directus and use its data in a vueJS app.

My setup is as follows:

  • vueJS app being developed on my local machine within VS Code Directus setup and running on a remote server

Within my home.js component I seem to be able to access Directus with the following and no errors in my browser console:

import DirectusSDK from "@directus/sdk-js";
const client = new DirectusSDK();
client.login({
  url: "https://mydomain.studio/directus/public/",
  project: "events",
  email: "email@emailaddress.com.au",
  password: "mypassword",
  storage: window.localStorage
});

When I attempt to output a listing of the collections with the below I get a rejected Promise and 401 unauthorized.

console.log(client.getCollections());

Hoping that once I get an understanding of why the above does not work and find a solution I will be able to access the data in my Directus seup and use it within my HTML.

All help greatly appreciated. Many thanks in advance.

If there is a newbie step-by-step tutorial explaining how to do the above I would be very glad to go over it.

Many thanks in advance

GlynSzasz
  • 21
  • 1
  • Are you waiting for the login to complete first? Or is `client.getCollections` as you've shown it on the very next line? – Dan Nov 18 '20 at 04:21
  • `client.getCollections` is on the next line. I have no idea how to test to ensure that the Promise has been resolved – GlynSzasz Nov 18 '20 at 04:26
  • Can you post the full component script (no template needed)? That way I can post something for you to try, using the format you're using. – Dan Nov 18 '20 at 04:29
  • https://stackoverflow.com/questions/27759593/how-do-i-wait-for-a-promise-to-finish-before-returning-the-variable-of-a-functio – tony19 Nov 18 '20 at 05:04
  • Thank you for taking a look this @Dan. This is part of a tutorial that I have been following [link](https://auth0.com/blog/beginner-vuejs-tutorial-with-user-login/) The script section is below and split up due to Stack overflow not letting me post so many characters into a single comment – GlynSzasz Nov 18 '20 at 06:32
  • ` – GlynSzasz Nov 18 '20 at 06:33
  • `// DirectusSDK - https://docs.directus.io/getting-started/introduction.html import DirectusSDK from "@directus/sdk-js"; const client = new DirectusSDK(); // This returns a promise - don't try to access any data until this promise resolves client.login({ url: "https://mydomain.studio/directus/public/", project: "events", email: "email@mail.com", password: "[AZX%h9opTC", storage: window.localStorage }); console.log(client.getCollections()); ` – GlynSzasz Nov 18 '20 at 06:33
  • It would be even better if you can edit that info into your post instead, but no worries, I'll just post an answer for now and you can try it. – Dan Nov 18 '20 at 22:26

1 Answers1

2

Disclaimer: I have no idea what Directus is. But something like this should technically work according to their docs:

import DirectusSDK from "@directus/sdk-js";

const client = new DirectusSDK({
  url: "https://mydomain.studio/directus/public/",
  project: "events",
  storage: window.localStorage
});

client.login({
  email: "email@emailaddress.com.au",
  password: "mypassword",
}).then(response => {
  console.log(client.getCollections());
});
Dan
  • 59,490
  • 13
  • 101
  • 110