DEV Community

Cover image for Nuxt.js + Github Gist: Embedding a Gist within pages
Moenupa WANG
Moenupa WANG

Posted on

Nuxt.js + Github Gist: Embedding a Gist within pages


Short Version

If you are quite experienced with nuxt.js, here is the logic:

This approach get rid of embedding method, and instead fetch the json file provided by Github API, i.e. to present the data.

The url format is<gist-id> in which <gist-id> is the xxxxxx bit of gist url

This also would work for Vue.js with minor modifications.

If you are interested, you can skip the implementation part and quick view the limitations and parallel approaches.

Long Version

The motivation, some parallel approaches, implementation and limitations.


The reason I have come up with this approach is, the Github-provided js script for embedding calls document.write(), which is not suitable for Vue.js frameworks, without the aid of other modules and plugins.

You may experience a warning below, once you embed it directly like <script src="embedded-gist-js-url"></script> as in raw html:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
Enter fullscreen mode Exit fullscreen mode

Parallel Approaches

Sadly none of the above works @_@, at least for me. Therefore I choose this kind of dumb yet the only working approach.


  • Store the list of to-be-displayed gist ids in data.
  • Use async fetch() {} provided by nuxt.js to fetch the jsons from github API
  • Display json files properly, with the most basic v-for and v-if
  • Some styling

For source code you can click this link or examine the demonstration at the very start of the post.


  • Hit limit (for more info visit documentation), unlike the unlimited hit js provided by Github.
  • Heavier coding, this approach involves a lot of coding of vue.js, adding 10-20 lines of code, while parallel approaches may only take 2-3 lines.

There may be other unknown limitations, hope you can point them out for me.


Thank you for reading this post.

Again, if you are interested in the same topic, or have some ideas about this approach, or get stumbled by the same trouble, feel free to leave a comment.

Top comments (0)