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

Demonstration

Short Version

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

This approach get rid of https://gist.github.com/xxxxx/xxxxx.js embedding method, and instead fetch the json file provided by Github API, i.e. https://api.github.com/gist/ to present the data.

The url format is https://api.github.com/gist/<gist-id> in which <gist-id> is the xxxxxx bit of gist url https://gist.github.com/username/xxxxxx

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.

Motivation

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.

Parallel Approaches

• Using postscribe with nuxt.js as a plugin like top answer from Stack Overflow (second solution mentioned)
• Using vue-embed-gist
• if you have other parallel approaches or ideas do let me now

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

Implementation

• 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.

Limitations

• 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.

Conclusion

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.

Comments

[Yevhen Marynych]

Postscribe-solution worked for me! (Project on Nuxt 2)