Promise rejected and unable to getCollections or getItems within VUE and Directus

user_11554744 0
Viewed 197

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

headless-cms directus vue-component vue.js
1 Answers

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());
});
user_21850930
Related