The easy way to include a Gist is to use the embed URL for the Gist provided by GitHub, for instance:
<script src="https://gist.github.com/nickwu241/8f0c4c95aa68fe969dcebddd456b6752.js"></script>But including this in a Vue component template results in:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
Oh no! To fix this, we will include the Gist statically by grabbing the HTML/CSS produced by the Javascript code and make it a Vue component.
Steps to embed a Gist in Vue
Run this command to generate the Gist component Gist.vue, replacing <USERNAME> and <GIST_ID>:
python <(curl https://raw.githubusercontent.com/nickwu241/vue-static-gist-example/master/to_gist_comp.py) <USERNAME>/<GIST_ID> For the curious, this command executes the Python script below.
Now just register the component like any other Vue component:
Here’s what alive example looks like:
- Live Example: https://nickwu241.github.io/vue-static-gist-example
- Example Source: https://github.com/nickwu241/vue-static-gist-example
Thanks for reading, 👏 if this helped you out! Check out some of my other posts and see you next time :)
🌈 Find me on Instagram
🐙 Follow me on GitHub
⭐ Let’s connect on LinkedIn
🐦 Follow me on Twitter
