Observable notebook import example on Nuxt.js / Vue.js Application

Observable notebook import example on Nuxt.js / Vue.js Application

Youtube-Demonetized-Words-Study .Observable notebook import example on Nuxt.js / Vue.js application, generated as static page on github pages


This is an example of embeding an Observable notebook into a static vuejs/nuxtjs page.

The main trick here is to transpile the notebook ES module during build time. You have to edit you nuxt.config.js and add the following

  build: {
    transpile: ['@radames/youtube-demonetized-words-similarity-study'],
    extend(config, ctx) {
        test: /\.js$/,
        loader: require.resolve('@open-wc/webpack-import-meta-loader')

Don't forget you have to install your notebook and a custom webpack meta loader and observable runtime

npm install @observablehq/runtime
npm install @open-wc/webpack-import-meta-loader
npm install "https://api.observablehq.com/@radames/youtube-demonetized-words-similarity-study.tgz?v=3"

Build Setup

# install dependencies
$ npm run install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

Initial setup up for gh-pages worktree branch


$ git checkout --orphan gh-pages
$ git reset --hard
$ git commit --allow-empty -m "Init"
$ git checkout master

Make your worktree to your deploy folder

$ rm -rf _site
$ git worktree add _site gh-pages


$ npm run gh-pages

Download Details:

Author: radames

Live Demo: https://radames.github.io/Youtube-Demonetized-Words-Study/

GitHub: https://github.com/radames/Youtube-Demonetized-Words-Study

vuejs javascript nuxtjs nuxt

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Share Code Between NuxtJS Projects?

5 Tips for Sharing Code Between NuxtJS Projects - How to share code between NuxtJS projects? What are the challenges to sharing code between Nuxt projects? Normally shared code is in the form of an npm package with importable components, and that can be done with Nuxt

A Thorough Introduction to NuxtJS

NuxtJS is a framework built on top of VueJS. The biggest benefits you get out of the box are server-side rendering and automatic code splitting. You also get...

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app? **[Hire Dedicated VueJS Developers](https://hourlydeveloper.io/hire-dedicated-vue-js-developer/ "Hire Dedicated VueJS Developers")** on the contract (time/project) basis providing regular...

How to setup a Sitemaps with the NuxtJs

Hey to everyone reading this! In this article, I’d like to investigate the different options of creating sitemaps in Nuxt using the sitemap module.

Nuxtjs, Vuejs, Vuetify, Youtube Clone - Comment Section - Tricking Library Ep26

In this tutorial we implement a simple youtube comment section clone in our nuxtjs/vuejs app, using vuetify.