V8-archive: How to create custom extension in directus latest version

[dsingaravelan]

I want to create a custom extensions using latest version of directus.

I went through the below link, it seems to be a solution for version 6.4.
https://medium.com/directus/how-to-setup-a-custom-extension-770d6ea48551

The final output of my custom extension should look like this image link given below
https://cdn-images-1.medium.com/max/1200/1*Z3p42h2DcIS0IiC5nh9jTQ.png

Kindly some one give me a solution to create a custom extension.
OR
please provide steps to create a custom extension

[jorauch]

Maybe the following example can help you.

<template>
  <div class="demo-page">
    <v-header title="Demo List"></v-header>
    <h1 class="style-0">Demo List</h1>
    <ul>
      <li v-for="item in items">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "demo-page",

  data: () => ({
    items: [],
  }),

  created() {
    this.$api.getItems('****collectionName*****').then(items => this.items = items.data)
  }
};
</script>

<style lang="scss" scoped>
.demo-page {
  padding: var(--page-padding);

  h1 {
    margin-bottom: 20px;
  }
}
</style>

[benhaynes]

Hey @dsingaravelan — let us know if you're using Directus 6 or 7... this article is for our older version 6. I've just added notes to each "legacy" Medium article to make this clearer. What @jorauch posted is a great example for v7 (the latest/current version).

You can go through v7 Docs for Extensions here:

https://docs.directus.io/extensions/

There are also examples in the codebase to help you get started. Please take a look at all that and let us know if anything is missing.

Thanks!

[dsingaravelan]

I am using 7.0.17,

Hey @dsingaravelan — let us know if you're using Directus 6 or 7... this article is for our older version 6. I've just added notes to each "legacy" Medium article to make this clearer. What @jorauch posted is a great example for v7 (the latest/current version).

You can go through v7 Docs for Extensions here:

https://docs.directus.io/extensions/

There are also examples in the codebase to help you get started. Please take a look at all that and let us know if anything is missing.

Thanks!

I'm using 7.0.17
I checked the link you gave, for custom page it has only page.vue & meta.json. Is any other files required ? when I created a custom page it show this error like below:
Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
at ensureCtor (vue.runtime.esm.js?2b0e:2372)
at eval (vue.runtime.esm.js?2b0e:2431)
at eval (vue.runtime.esm.js?2b0e:328)

If you have any other tutorial for custom extensions It would be very helpful to use the directus tool extensively. Thanks

[benhaynes]

Thanks @dsingaravelan — I believe those are the only two files you need.

We're cleaning up how the extensions work now and will add robust Docs for creating custom ones as soon as that's done!

[danielantunesfernandes]

Hi.
I have the same problem, i used compose file from official docker container and i want to create a custom page but i have the same problem as dsingaravelan .

If i use the files page.vue and meta.json as is in example, i have an error in console of browser where requets to load page.js and page.css returns 404.
If i use the files page.js with vue code exemple i have the following error:
Uncaught SyntaxError: Unexpected token < vue.runtime.esm.js:3561 Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined at bn (vue.runtime.esm.js:3561) at vue.runtime.esm.js:3620 at vue.runtime.esm.js:336 bn @ vue.runtime.esm.js:3561 (anonymous) @ vue.runtime.esm.js:3620 (anonymous) @ vue.runtime.esm.js:336 Promise.then (async) wn @ vue.runtime.esm.js:3650 rn @ vue.runtime.esm.js:3175 ln @ vue.runtime.esm.js:3391 fn @ vue.runtime.esm.js:3328 e._c @ vue.runtime.esm.js:3460 ai @ page.vue?a9ad:1 e._render @ vue.runtime.esm.js:3517 r @ vue.runtime.esm.js:4019 tr.get @ vue.runtime.esm.js:4419 tr @ vue.runtime.esm.js:4408 $n @ vue.runtime.esm.js:4026 xr.$mount @ vue.runtime.esm.js:8350 init @ vue.runtime.esm.js:3093 h @ vue.runtime.esm.js:5918 p @ vue.runtime.esm.js:5865 (anonymous) @ vue.runtime.esm.js:6456 Dn.e._update @ vue.runtime.esm.js:3901 r @ vue.runtime.esm.js:4019 tr.get @ vue.runtime.esm.js:4419 tr.run @ vue.runtime.esm.js:4494 Gn @ vue.runtime.esm.js:4250 (anonymous) @ vue.runtime.esm.js:1970 st @ vue.runtime.esm.js:1896 Promise.then (async) it @ vue.runtime.esm.js:1923 ht @ vue.runtime.esm.js:1980 Qn @ vue.runtime.esm.js:4342 tr.update @ vue.runtime.esm.js:4484 ve.notify @ vue.runtime.esm.js:730 set @ vue.runtime.esm.js:1055 nr.set @ vue.runtime.esm.js:4571 (anonymous) @ page-extension.vue:46 Xe @ vue-router.esm.js:2121 (anonymous) @ vue-router.esm.js:2104 (anonymous) @ vue-router.esm.js:1979 (anonymous) @ vue-router.esm.js:1979 (anonymous) @ vue.runtime.esm.js:1970 st @ vue.runtime.esm.js:1896 Promise.then (async) it @ vue.runtime.esm.js:1923 ht @ vue.runtime.esm.js:1980 Qn @ vue.runtime.esm.js:4342 tr.update @ vue.runtime.esm.js:4484 ve.notify @ vue.runtime.esm.js:730 set @ vue.runtime.esm.js:1055 (anonymous) @ vue-router.esm.js:2503 (anonymous) @ vue-router.esm.js:2502 Be.updateRoute @ vue-router.esm.js:1989 (anonymous) @ vue-router.esm.js:1867 (anonymous) @ vue-router.esm.js:1976 r @ vue-router.esm.js:1706 (anonymous) @ vue-router.esm.js:1710 (anonymous) @ vue-router.esm.js:1956 (anonymous) @ vue-router.esm.js:2096 beforeRouteEnter @ page-extension.vue:45 (anonymous) @ vue-router.esm.js:2095 p @ vue-router.esm.js:1935 r @ vue-router.esm.js:1709 De @ vue-router.esm.js:1717 (anonymous) @ vue-router.esm.js:1971 r @ vue-router.esm.js:1706 (anonymous) @ vue-router.esm.js:1710 (anonymous) @ vue-router.esm.js:1956 (anonymous) @ vue-router.esm.js:1784 p @ vue-router.esm.js:1935 r @ vue-router.esm.js:1709 r @ vue-router.esm.js:1713 (anonymous) @ vue-router.esm.js:1710 (anonymous) @ vue-router.esm.js:1956 (anonymous) @ router.js:250 Promise.then (async) (anonymous) @ router.js:245 p @ vue-router.esm.js:1935 r @ vue-router.esm.js:1709 De @ vue-router.esm.js:1717 Be.confirmTransition @ vue-router.esm.js:1964 Be.transitionTo @ vue-router.esm.js:1866 at.init @ vue-router.esm.js:2494 beforeCreate @ vue-router.esm.js:539 nt @ vue.runtime.esm.js:1847 Fn @ vue.runtime.esm.js:4169 e._init @ vue.runtime.esm.js:4944 xr @ vue.runtime.esm.js:5025 56d7 @ main.js:66 l @ bootstrap:83 0 @ bootstrap:217 l @ bootstrap:83 i @ bootstrap:45 (anonymous) @ bootstrap:217 (anonymous) @ bootstrap:217 .*$ namespace object:69 Uncaught (in promise) Error: Cannot find module './undefined' at .*$ namespace object:69

Could you please help or point me some example that works?

[siryan2]

Hi @stein99,
I had the same issue and solved it by installing parcel-builder globally. cd into the directory with the page.vue and meta.json file.
Then type parcel build page.vue -d ./ --no-source-maps --global __DirectusExtension__ and refresh the admin page after the files has been generated.
Hope that will help you.

[danielantunesfernandes]

Ty @siryan2 ,

As i said previous i am using docker-compose from directus official container. I'm very fresh using docker, could you please teach how to install parcel in the container inside docker?

[danielantunesfernandes]

I already manage to install parcel and work as you said.

Thank you.