DEV Community: OverScore Media

Going Deeper with Nuxt

Matthew Piercey — Fri, 17 Apr 2020 22:27:17 +0000

Well, well well... It's been a while since my last post in this series.

Obviously, I don't have to worry about not having enough spare time right now. Y'all know why.

But honestly, after the second post I'd basically exhausted my then-current knowledge of Nuxt. But since then, I've been experimenting and learning (oh have I!) and I figured now's the time to share some of what I've learned about Nuxt, and about JavaScript/web development in general in the last couple of months. Thanks @almostconverge for the giving me the motivation to continue this series.

For Starters

I'm just going to assume you already got a Nuxt app up and running if you want to follow along. By all means, check out the first two articles in this series in you need a refresher, and visit nuxtjs.org for all things Nuxt.

Also, since a lot has changed over the past few months, if you somehow have been following along, by all means try executing this in your Nuxt app folder:

$ yarn upgrade --latest

(Yes, I'm a Yarn user. NPM? You mean "Nautical Pirate Moustache?" But seriously, though; if you are using NPM, the commands are super similar; usually yarn dev or what have you is npm run dev. In this case, gee, I dunno; check out

HOW TO: Update all npm packages in your project at once | by Jhey Tompkins | Medium

Jhey Tompkins ・ Apr 12, 2018 ・
Medium

I guess. Or maybe do npm outdated then look on NPMJS.com for the specific packages to find their latest versions, then add those to your package.json)

You may as well update everything (though at your own risk; it might break stuff.) in your Nuxt app anyway, since the Nuxt dev team has been doing some big updates in rather rapid succession lately. Cool stuff!

That out of the way...

Let's get down to the actual article, shall we?

Psyche! Sorry, but I have so much to discuss here that I'm splitting it up into separate articles. I've started a new series on Nuxt, so check out the first post below (you'll see a Table of Contents there with the rest of them).

There are a bunch of mini tutorials and things, so do check them out if you want to do more with Nuxt.js.

Also, I got a whole bunch of examples running at https://nuxt-toolkit.overscore.media, so take a look if you want to see them in action.

Stay safe, stay healthy, and keep coding, everybody! :]

Nuxt, Meet Vuetify

Matthew Piercey for OverScore Media ・ Apr 14 '20

#nuxt #vue #javascript #vuetify

Nuxt, Meet Particles

Matthew Piercey — Tue, 14 Apr 2020 20:48:16 +0000

This article is part of a series on my experiences with Nuxt.js that I built into the nuxt-toolkit by OverScore Media

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

See a live example at https://nuxt-toolkit.overscore.media! :]

Ah, particle effects. Wondrous things, really. And I can think of no better particle effects library for the web (that isn't something related to game development or 3D rendering) than Particles.JS.

VincentGarreau / particles.js

A lightweight JavaScript library for creating particles

particles.js

A lightweight JavaScript library for creating particles.

`Demo / Generator`

Configure, export, and share your particles.js configuration on CodePen:
http://vincentgarreau.com/particles.js/

CodePen demo:
http://codepen.io/VincentGarreau/pen/pnlso

`Usage`

Load particles.js and configure the particles:

index.html

<div id="particles-js"></div>

<script src="particles.js"></script>

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

particles.json

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src":

…

View on GitHub

Now, how does one go about implementing this awesome library into one's Nuxt project? Sure, there are at least a few Vue libraries that work with Particles, but I was able to hack together a complete component without using any other libraries.

Here's the Code

In its entirety, this is my implementation, inspired by https://www.npmjs.com/package/vue-particles-generator and https://github.com/creotip/vue-particles.

<template>
  <div
    :id="id"
    class="particles-js"
    :color="color"
    :particleOpacity="particleOpacity"
    :linesColor="linesColor"
    :particlesNumber="particlesNumber"
    :shapeType="shapeType"
    :particleSize="particleSize"
    :linesWidth="linesWidth"
    :lineLinked="lineLinked"
    :lineOpacity="lineOpacity"
    :linesDistance="linesDistance"
    :moveSpeed="moveSpeed"
    :movementDirection="movementDirection"
    :hoverEffect="hoverEffect"
    :hoverMode="hoverMode"
    :clickEffect="clickEffect"
    :clickMode="clickMode"
  ></div>
</template>
<script>
/* eslint-disable */
export default {
  props: {
    color: {
      type: String,
      default: '#dedede'
    },
    particleOpacity: {
      type: Number,
      default: 1.0
    },
    particlesNumber: {
      type: Number,
      default: 80
    },
    shapeType: {
      type: String,
      default: 'circle'
    },
    particleSize: {
      type: Number,
      default: 4
    },
    linesColor: {
      type: String,
      default: '#dedede'
    },
    linesWidth: {
      type: Number,
      default: 1
    },
    lineLinked: {
      type: Boolean,
      default: true
    },
    lineOpacity: {
      type: Number,
      default: 0.4
    },
    linesDistance: {
      type: Number,
      default: 150
    },
    moveSpeed: {
      type: Number,
      default: 3
    },
    movementDirection: {
      type: String,
      default: 'bottom-left'
    },
    hoverEffect: {
      type: Boolean,
      default: false
    },
    hoverMode: {
      type: String,
      default: 'grab'
    },
    clickEffect: {
      type: Boolean,
      default: false
    },
    clickMode: {
      type: String,
      default: 'push'
    }
  },
  data () {
    return {
      id: 'particles-instance-' + Math.floor(Math.random() * 5000)
    }
  },
  mounted () {
    require('particles.js')
    this.$nextTick(() => {
      this.initParticleJS(
        this.color,
        this.particleOpacity,
        this.particlesNumber,
        this.shapeType,
        this.particleSize,
        this.linesColor,
        this.linesWidth,
        this.lineLinked,
        this.lineOpacity,
        this.linesDistance,
        this.moveSpeed,
        this.movementDirection,
        this.hoverEffect,
        this.hoverMode,
        this.clickEffect,
        this.clickMode
      )
    })
  },
  methods: {
    initParticleJS (
      color,
      particleOpacity,
      particlesNumber,
      shapeType,
      particleSize,
      linesColor,
      linesWidth,
      lineLinked,
      lineOpacity,
      linesDistance,
      moveSpeed,
      movementDirection,
      hoverEffect,
      hoverMode,
      clickEffect,
      clickMode
    ) {
        particlesJS(this.id, {
          "particles": {
            "number": {
              "value": particlesNumber,
              "density": {
                "enable": true,
                "value_area": 800
              }
            },
            "color": {
              "value": color
            },
            "shape": {
            // circle, edge, triangle, polygon, star, image
              "type": shapeType,
              "stroke": {
                "width": 0,
                "color": "#192231"
              },
              "polygon": {
                "nb_sides": 5
              }
            },
            "opacity": {
              "value": particleOpacity,
              "random": false,
              "anim": {
                "enable": false,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
              }
            },
            "size": {
              "value": particleSize,
              "random": true,
              "anim": {
                "enable": false,
                "speed": 40,
                "size_min": 0.1,
                "sync": false
              }
            },
            "line_linked": {
              "enable": lineLinked,
              "distance": linesDistance,
              "color": linesColor,
              "opacity": lineOpacity,
              "width": linesWidth
            },
            "move": {
              "enable": true,
              "speed": moveSpeed,
              "direction": movementDirection,
              "random": false,
              "straight": false,
              "out_mode": "out",
              "bounce": false,
              "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
              }
            }
          },
          "interactivity": {
            "detect_on": "canvas",
            "events": {
              "onhover": {
                "enable": hoverEffect,
                "mode": hoverMode
              },
              "onclick": {
                "enable": clickEffect,
                "mode": clickMode
              },
              "onresize": {
                "enable": true,
                "density_auto": true,
                "density_area": 400
              }
            },
            "modes": {
              "grab": {
                "distance": 140,
                "line_linked": {
                  "opacity": 1
                }
              },
              "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
              },
              "repulse": {
                "distance": 200,
                "duration": 0.4
              },
              "push": {
                "particles_nb": 4
              },
              "remove": {
                "particles_nb": 2
              }
            }
          },
          "retina_detect": true
        })
    }
  }
}
</script>

Well, that was a doozy! Anyway, to use it, do something like this (don't miss the <client-only></client-only>:

<template>
<!-- -->
  <client-only>
    <Particles
      color="#DCBA8F"
      :particles-number="100"
      shape-type="star"
      :particle-size="3"
      movement-direction="top"
      lines-color="#dedede"
      :line-linked="false"
      :move-speed="0.75"
    />
  </client-only>
<!-- -->
</template>

<script>
import Particles from '~/components/Particles.vue'

export default {
  components: {
    Particles
  }
}
</script>

<style lang="scss">
div[id^="particles-instance-"] {
  height: 100vh !important;
  width: 100vw !important;
  position: fixed !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba($color: #05114e, $alpha: 0.4);
  z-index: 2 !important;
}
</style>

The above code gives you a fullscreen particles background. Mixed with something like this (with a background of ~assets/img/background.png):

.hero-background {
  height: 100vh !important;
  width: 100vw !important;
  position: fixed !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-blend-mode: overlay !important;
  background-attachment: fixed !important;
  background-position: fixed !important;
  background: rgba($color: #05114e, $alpha: 0.4);
  background-image: url("~assets/img/background.png") !important;
  z-index: 1 !important;
}

you'd get a nice overlay. There are a ton of options, really; it's all CSS past this point. https://vincentgarreau.com/particles.js/ is your friend when it comes to checking out what changing props does.

Hope this was helpful; enjoy! Stay safe and keep on coding!

Nuxt, Meet Vue-Picture-Swipe

Matthew Piercey — Tue, 14 Apr 2020 20:33:08 +0000

This article is part of a series on my experiences with Nuxt.js that I built into the nuxt-toolkit by OverScore Media

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

See a live example at https://nuxt-toolkit.overscore.media! :]

Ah, the photo gallery. Once an actual place, the concept can now fit in the palm of your hand. Or on your lap. Or desk. I guess the analogy kinda falls apart there, but you get the point - including a photo gallery in your website can go a long way to improving its fun and usability.

Photos can help make otherwise uncertain concepts clearer, and they "speak" in ways textual characters would be hard-pressed to. Unless they're ASCII art... Point is, pictures are nice, and you want them in your Nuxt project.

Well, you're in luck. Granted, there are a lot of ways of doing this (some better than others, and likely some better than this one), but I can confirm that it works, and it works pretty well for my application. Let's get to it!

Get the Library

yarn add vue-picture-swipe or npm install --save vue-picture-swipe. You know the drill by now...

rap2hpoutre / vue-picture-swipe

🖼 Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe

Make the Nuxt Plugin

I named it gallery.js and put it in the ~/plugins/ folder of my Nuxt app. I then imported it in my nuxt-config.js like so:

// ...
plugins: [
  { src: '~/plugins/gallery', mode: 'client' }
],
// ...

And, that's it!

Wait, you want the code for the plugin? Kids these days...

Fine. But only because I'm in a good mood. Take it, why don't ya?

import Vue from 'vue'
import VuePictureSwipe from 'vue-picture-swipe'

Vue.component('Gallery', {
  components: {
    VuePictureSwipe
  },
  props: {
    imgs: {
      type: Array,
      required: true
    },
    options: {
      type: Object,
      required: false,
      default () {
        return {
          bgOpacity: 0.95,
          shareEl: true,
          zoomEl: true
        }
      }
    }
  },
  template: `<vue-picture-swipe :items="imgs" :options="options" />`
})

The Implementation of it All

Alright, once you've got all that setup, you should be able to use the Gallery component anywhere in your Nuxt app. Sure, you could make it just another component and import it only where you need it, but...

Imma be honest, I needed it to be a global component for my use case, so that's how I set it up. But the logic is basically the same for making it a local single-file component. Like so, I guess:

<!-- ~/components/Gallery.vue -->
<template>
  <client-only>
    <vue-picture-swipe :items="imgs" :options="options" />
  </client-only>
</template>

<script>
import VuePictureSwipe from 'vue-picture-swipe'

export default {
  name: 'Gallery',
  components: {
    VuePictureSwipe
  },
  props: {
    imgs: {
      type: Array,
      required: true
    },
    options: {
      type: Object,
      required: false,
      default () {
        return {
          bgOpacity: 0.95,
          shareEl: true,
          zoomEl: true
        }
      }
    }
  }
}
</script>

Something like that. Then you could import it with import Gallery from '~/components/Gallery' and use it only where you need it (no need to edit the nuxt.config.js in that case).

Your call. Either way, here's how you actually use the component in practice:

<Gallery :imgs="[{src: 'https://picsum.photos/200/300', thumbnail: 'https://picsum.photos/200/300', w: 200, h: 300, alt: 'random picture from picsum.photos to demonstrate the vue-picture-swipe component', title: 'Some Picture'}, {src: 'https://picsum.photos/200/300', thumbnail: 'https://picsum.photos/200/300', w: 200, h: 300, alt: 'random picture from picsum.photos to demonstrate the vue-picture-swipe component', title: 'Some Picture'}]" />

Yes, that seems like a giant unruly string (and it is; you can obviously outsource such logic to your component/page/layout data () but I'm just using it inline here), but here's the run-down:

:imgs is the array of image objects, which contain:

src is an individual image's, welll... source. Like it's URL.
thumbnail is a scaled-down version of the image to show before you click on it and make it full-screen. If you don't have a thumbnail as such, you can use the same URL like I did.
w is the image's width (in pixels).
h is the image's pixel height.
alt is the ever-important alt text for accessibility purposes.

Also, this is some CSS I added to spruce things up a bit:

.pswp__bg {
  background-color: #2f2f2f;
}

.my-gallery {
  display: flex;
  flex-flow: row wrap;
  figure {
    flex-grow: 1;
    min-width: 20%;
    margin-left: 5px;
    margin-right: 5px;
    a {
      img {
        border-radius: 10px;
        box-shadow: 5px 3px 5px #2f2f2f;
        &:hover {
          transform: scale(1.05);
          box-shadow: 5px 3px 5px #c9c3b2;
          transition: all 0.15s ease-in-out;
        }
      }
    }
  }
}

That'll give the images a little border and animation when you hover over them with your mouse, and the flex stuff is my way of spreading the images out enough so they aren't all clumped together, but putting as many of them that can comfortably fit together on the same line.

Fair warning - the images I used in this example are probably not great sizes for this, but that's why it's an example! (of what not to do?)

Anyway, I hope you got something out of this. Keep safe and healthy, and keep on coding!

Nuxt, Meet Plyr

Matthew Piercey — Tue, 14 Apr 2020 05:32:31 +0000

This article is part of a series on my experiences with Nuxt.js that I built into the nuxt-toolkit by OverScore Media

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

See a live example at https://nuxt-toolkit.overscore.media! :]

Oh, videos - the third Wonder of the Web (TM) - beyond plain text and images, that is... It really is astounding that global Internet connections are generally fast enough to be able to stream actual videos to people's phones, tablets, TVs, desktops, laptops, Ouya's, Raspberry Pi's, and brains - OK maybe not the last one yet - with minimal to no noticeable latency (depending on the video quality, of course).

So, in this Web 3/4.0 world, this the age of the Dailymotions and the Vudus by Walmart (what? you're telling me there are other video streaming platforms out there?), shouldn't websites finally be catching up?

(What number are we on, anyway? We're definitely past 2.0, right? Is it like semantic versioning or is it completely arbitrary? When was Web 2.5? Web 1.7? Web 1.3.4 rc 13?)

The thing is, most video streaming/hosting sites like the Vimeos of the world (see, I know what Vimeo is; does that make me cool/hip/vibin'?) come with their own embedding APIs/iFrames/whatever you kids are using these days. But let's be honest with ourselves for a second... They're kinda generic, right?

Why can't we inject a little individuality into our video players? Why can't we make the most of modern HTML5 and JavaScript, with a bit of CSS thrown in haphazardly (as always) as the gush from the bottom of a can of spray whip cream? I dunno; why are you asking all these open-ended questions? Wait, now I'm the one asking these questions? No, I don't think so. That couldn't be the case... Could it?

Now, before this article goes completely off the rails... (before? really? how wide were those rails?)

Introducing:

sampotts / plyr

A simple HTML5, YouTube and Vimeo player

🎉	Plyr is merging into Vidstack	🎉

Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.

Checkout the demo - Donate - Slack

Features

📼 HTML Video & Audio, YouTube & Vimeo - support for the major formats
💪 Accessible - full support for VTT captions and screen readers
🔧 Customizable - make the player look how you want with the markup you want
😎 Clean HTML - uses the right elements. <input type="range"> for volume and <progress> for progress and well, <button>s for buttons. There's no <span> or <a href="#"> button hacks
📱 Responsive - works with any screen size
💵 Monetization - make money from your videos
📹 Streaming - support for hls.js, Shaka and dash.js streaming playback
🎛 API - toggle playback, volume, seeking, and more through a standardized API
🎤 Events - no messing around with…

View on GitHub

Yes, plyr is very fun indeed. Basically, it's a JavaScript wrapper for HTML5 audio and video that supports YouTube and Vimeo out-of-the-box. Sure, you could just make a Vue component for the iframe embed for YouTube and Vimeo, but Plyr is such an elegant solution, that I thought it was too good to pass by.

The Component in Question

I made this Vue component as a Nuxt plugin. I called it video-player.js, put it in the plugins directory of my Nuxt app, and imported it in my nuxt.config.js file like so:

// ...
css: [
  'plyr/dist/plyr.css'
],
plugins: [
  { src: '~/plugins/video-player', mode: 'client' }
]
// ...

I made use of the marvelous

redxtech / vue-plyr

A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.

which actually comes with a build specially-suited to applications like Nuxt projects (for Server-Side Rendering or SSR). Fun times.

Here's what my plugin looked like in the end. Admittedly, I went a bit over-the-top on the props, and I doubt I'll end up remembering all of them anyway, but it's an example, right? Right! (Right?)

Assuming you're using the compiler build of Vue - if not, you can't make global components this way (though I guess you could just as easily modify it to make it local without the need for making it a plugin):

import Vue from 'vue'
import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr'

Vue.component('video-player', {
  components: {
    VuePlyr
  },
  props: {
    // eslint-disable-next-line vue/require-prop-types
    plyr: {
      fullscreen: {
        enabled: true
      }
    },
    // eslint-disable-next-line vue/require-prop-type-constructor
    emit: ['embed'],
    type: {
      type: String,
      default: 'video', // 'audio' or 'video'
      required: false
    },
    source: {
      type: String,
      default: 'web', // 'youtube', 'web', or 'vimeo'
      required: false
    },
    vidId: {
      type: String,
      required: false // GHMjD0Lp5DY
    },
    mp3URL: {
      type: String,
      required: false // https://example.com/audio.mp3
    },
    oggURL: {
      type: String,
      required: false // https://example.com/audio.ogg
    },
    videoURL: {
      type: String,
      required: false // https://example.com/video.mp4
    },
    thumbnail: {
      type: String,
      required: false // poster.png
    },
    videoType: {
      type: String,
      required: false,
      default: 'video/mp4'
    },
    videoSourceSizes: {
      type: Array, // [720, 1080]
      required: false
    },
    videoSizeURLS: {
      type: Array, // [video-720p.mp4, video-1080p.mp4]
      required: false
    },
    videoCaptions: {
      type: Object, // {[name: 'English', lang: 'en', src: 'captions-en.vtt'], [name: 'Spanish', lang: 'es', src: 'captions-es.vtt']}
      required: false
    }
  },
  computed: {
    vimeoURL () {
      return `https://player.vimeo.com/video/${this.vidId}?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media`
    },
    youtubeURL () {
      return `https://www.youtube.com/embed/${this.vidId}?iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1`
    }
  },
  template: `
    <div class="video-player">
      <vue-plyr v-if="type === 'video' && source === 'youtube'">
        <div class="plyr__video-embed">
          <iframe
            :src="youtubeURL"
            allowfullscreen allowtransparency allow="autoplay">
          </iframe>
        </div>
      </vue-plyr>
      <vue-plyr v-if="type === 'video' && source === 'vimeo'">
        <div class="plyr__video-embed">
          <iframe
            :src="vimeoURL"
            allowfullscreen allowtransparency allow="autoplay">
          </iframe>
        </div>
      </vue-plyr>
      <vue-plyr v-if="type === 'video' && source === 'web'">
        <video :poster="thumbnail" :src="videoURL">
          <source v-for="(url, index) in videoSizeURLS" :key="url" :src="url" :type="videoType" :size="videoSourceSizes[index]">
          <track kind="captions" label="English" srclang="en" src="captions-en.vtt" default>
        </video>
      </vue-plyr>
      <vue-plyr v-if="type === 'audio' && source === 'web'">
        <source v-if="mp3URL" :src="mp3URL" type="audio/mp3" />
        <source v-if="oggURL" :src="oggURL" type="audio/ogg" />
      </vue-plyr>
    </div>
  `
})

Now, I will admit - it may not be elegant, but it allows me to do this and it works exactly as you'd think it would: <video-player source="youtube" id="GHMjD0Lp5DY">

Admittedly, to make it look the way I wanted it to look, I had to get... shall we say "creative" with some CSS. Not my best work, but it did the job. I just wanted to change some of the button colours to match https://botinabox.ca, and it ended up working. Also, I know that Plyr has SCSS and I could've imported the files I needed and changed the variables around, but that strangely only worked in development mode. Oh well...

div.plyr {
  @media only screen and (min-width: 800px) {
    max-height: 80vh !important;
    max-width: 80vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.plyr__control--overlaid {
  background-color: #e2e2e2 !important;
  &:not(button[data-plyr='captions'], button[data-plyr='settings'], button[data-plyr='fullscreen']) {
    color: #2f2f2f !important;
  }
  &:hover {
    background-color: #c9c3b2 !important;
    color: #1818a7 !important;
  }
}

button[data-plyr='play'] {
  color: #2f2f2f !important;
}

button.plyr__controls__item,
button.plyr__control,
div.plyr__menu__container {
  background-color: #e2e2e2 !important;
  &:not(button[data-plyr='captions'], button[data-plyr='settings'], button[data-plyr='fullscreen']) {
    color: #2f2f2f !important;
  }
  &:hover {
    &:not(div[id^='plyr-settings-']) {
      background-color: #c9c3b2 !important;
    }
    color: #1818a7 !important;
  }
}

button.plyr__control::before {
  background-color: #1818a7 !important;
}

div.plyr__volume {
  button.plyr__control {
    background-color: hsla(0, 0%, 0%, 0) !important;
    &:hover {
      background-color: #e2e2e2 !important;
    }
  }
}

button[data-plyr='captions'],
button[data-plyr='settings'],
button[data-plyr='fullscreen'] {
  background-color: hsla(0, 0%, 0%, 0) !important;
  &:hover {
    background-color: #e2e2e2 !important;
  }
}

input[id^='plyr-seek-'],
input[id^='plyr-volume-'] {
  color: #e2e2e2 !important;
}

And implement the component like this:

<video-player source="youtube" vid-id="GHMjD0Lp5DY" />

Well that was... fun. It was a bit of a struggle to get it all set up, admittedly, but it's doing exactly what I want it to do, so I'm not going to complain about it. I hope this was somehow helpful in your quest to learn more about Nuxt/Vue/JS/web development. Stay safe, and keep on coding!

Nuxt, Meet Prism

Matthew Piercey — Tue, 14 Apr 2020 05:04:14 +0000

This article is part of a series on my experiences with Nuxt.js that I built into the nuxt-toolkit by OverScore Media

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

See a live example at https://nuxt-toolkit.overscore.media! :]

Ah, syntax highlighting. The beauty of code made manifest!

Syntax highlighting can make or break a site in terms of UI, IMO, since all too often I see nasty or downright-broken code blocks on websites that should frankly know better... But every now and then there's something of such pure magic that it makes it all worth it.

There are a bunch of ways of getting syntax highlighting to work with JavaScript. This is one way of many, but it's the way I did it. Take that as you will.

Look into the Prism

Prism is my favourite syntax highlighting library. It's really quite nice when you get it all set up. Admittedly, to get it to work the way I like it, I ended up importing a bunch of CSS and quite a bit of JS that I probably didn't end up needing, and which definitely added to my Nuxt project's bundle size considerably (and it's an absolute nightmare to try to make it play nice with things like PurgeCSS), but... Tradeoffs? I mean, would you rather have a slightly-slower-but-still-fairly-zippy site that looks beautiful or a super-fast site that looks "meh"? I don't know. Fight about it in the comments, I guess? _(ツ)_/¯

Ready?

If you are ready to start, and you want to do it my way for some reason, first import the libraries you'll need to make it happen.

yarn add prismjs clipboard or npm install --save prismjs clipboard

Next, bundle it all up in a Nuxt plugin, like ~/plugins/prism.js. Choose your own Prism theme, language supports, and plugins. Fair warning, there are a lot of them from which to choose. You might be here for a while...

/* eslint-disable no-template-curly-in-string */
/* eslint-disable no-undef */
import 'clipboard' // For the copy to clipboard plugin
import Prism from 'prismjs'
import Vue from 'vue'

// Include a theme:
import 'prismjs/themes/prism-tomorrow.css'

// Include language support: (optional)
import 'prismjs/components/prism-scss'
import 'prismjs/components/prism-markup'
import 'prismjs/components/prism-ruby'

// Include the toolbar plugin: (optional)
import 'prismjs/plugins/toolbar/prism-toolbar'
import 'prismjs/plugins/toolbar/prism-toolbar.css'

// Include the autolinker plugin: (optional)
import 'prismjs/plugins/autolinker/prism-autolinker'
import 'prismjs/plugins/autolinker/prism-autolinker.css'

// Include the line numbers plugin: (optional)
import 'prismjs/plugins/line-numbers/prism-line-numbers'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

// Include the line highlight plugin: (optional)
import 'prismjs/plugins/line-highlight/prism-line-highlight'
import 'prismjs/plugins/line-highlight/prism-line-highlight.css'

// Include some other plugins: (optional)
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
import 'prismjs/plugins/highlight-keywords/prism-highlight-keywords'
import 'prismjs/plugins/show-language/prism-show-language'
import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace'

Vue.component('prism', {
  props: {
    lang: {
      type: String,
      default: 'js'
    }
  },
  mounted () {
    Prism.highlightAll()
  },
  template: '<div class="prism"><pre class="line-numbers" :class="`language-${lang}`"><code><slot></slot></code></pre></div>'
})

Next, add it to your nuxt.config.js like so:

// ...
plugins: [
  { src: '~/plugins/prism', mode: client' }
]
// ...

Use it for realsies

Try out something like this to make sure it works:

<prism lang="scss">
.VueToNuxtLogo {
  display: inline-block;
  animation: turn 2s linear forwards 1s;
  transform: rotateX(180deg);
  position: relative;
  overflow: hidden;
  height: 180px;
  width: 245px;
}
</prism>

Caveat(s)

Fair warning - if you're using this to display HTML or any sort of XML-y markup, you may run into issues if you don't put escaped markup inside the <prism> block. Try converting your markup to escaped markup with an online converter or something.

Also, PurgeCSS and Prism don't like each other all that much, so if you happen to be using them together, prepare to have your wonderful styling ripped away by Purge's unrelenting scourge, all in the name of bundle size reduction... Granted, there is probably a ton of unused CSS if you happen to do it this way, but Purge is overly-aggressive. Now, you can add some words to your PurgeCSS whitelist, but honestly it's a mess and I haven't figured out a better solution, and you'll probably have to manually add classes to make things work... Or just don't use Purge (or don't do it this way). Your call. Either way, almost every solution causes new problems, so you can't really avoid making these difficult choices if you want to have some nice things.

  purgeCSS: {
    enabled: true, // True means it's always on in dev/build/generate mode
    // The two below options achieve the happy medium between Prism.js and PurgeCSS
    // If you're having trouble with code highlighting, try adding the pertinent clases to the whitelist
    whitelistPatternsChildren: [/token$/],
    whitelist: [
      'pre', 'code', 'prism', 'line-numbers', 'tag', 'toolbar-item', 'toolbar',
      'code-toolbar', 'span', 'button', 'line-numbers-rows', 'url-link', 'attr-name', 'attr-value', 'punctuation',
      'keyword', 'keyword-let', 'operator', 'string'
    ]
  },

Also, if you're using Vuetify, this code will remove some of the default styling so your code blocks don't look weird:

code {
  box-shadow: 0 !important;
  &::before {
    content: '' !important;
  }
}

Anyway, stay safe and healthy, everybody. Keep on coding!

Nuxt, Meet Disqus

Matthew Piercey — Tue, 14 Apr 2020 04:44:52 +0000

This article is part of a series on my experiences with Nuxt.js that I built into the nuxt-toolkit by OverScore Media

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

See a live example at https://nuxt-toolkit.overscore.media! :]

Hey everybody! I hope you're doing well. You probably already know why you're here. If not, Nuxt is a Vue-based JS framework for building websites/web apps, and Disqus is a commenting system for blogs/websites.

Plug these together, and you get a pretty powerful duo, IMO. In we go!

ktquez / vue-disqus

Integrate Disqus count and comments in your application Vue 3, with support for SPA

Installation Process

Save as a Dependency

yarn add vue-disqus or npm install --save vue-disqus.

Make a Plugin

Create a file in the ~/plugins folder of your Nuxt app. I named mine disqus.js. (Can you guess why? Can ya?) It should look like this:

import Vue from 'vue'
import VueDisqus from 'vue-disqus'

Vue.use(VueDisqus)

Next, import said plugin in your nuxt.config.js like so:

// ...
plugins: [
  // Thanks https://dev.to/thelearneer for
  // pointing out that this shouldn't be in client mode
  '~/plugins/disqus',
],
// ...

In the words of Lyle from the Animal Crossing series, "Bang! Boom!"

Make it a Component

Now, you can do a ton with this power, but here's a rather grounded example that I used when I built https://botinabox.ca: (As I write this, I just noticed that my implementation on that site just broke. Oh well, I'll get around to fixing it, but it's probably my fault and unrelated to the way I setup the component...)

<!-- ~/components/Comments.vue -->
<template>
  <v-layout class="comment-box">
    <v-container>
      <vue-disqus
        v-if="metadata"
        shortname="botinabox"
        :identifier="`botinabox-${metadata.title}`"
        :url="`https://botinabox.ca/tutorials/${metadata.url}`"
      ></vue-disqus>
    </v-container>
  </v-layout>
</template>

<script>
export default {
  computed: {
    metadata () {
      const metadata = this.$store.state.tutorials.slice()

      const tutorialMeta = metadata.filter((tutorial) => {
        return `/tutorials/${tutorial.url}` === this.$route.path
      })[0]

      return tutorialMeta
    }
  }
}
</script>

Now, don't get overwhelmed by this. I'll break it down for you. First, notice the <vue-disqus> component amidst a couple of Vuetify components. That's the real kicker here, functionality wise. The shortname is super important; it's your site name when you sign up for Disqus at https://disqus.com/admin/. It all should be fairly straightforward. (I also recommend setting up a Comment Policy, but that's outside the scope of this article. Not that I'm known to be one to stay on scope, but you know....)

The v-if="metadata" is because I had some issues when I navigated to another page if the comment box was visible, so making it conditionally-visible solved my problem. The :identifier is for different pages - in this case I had it set up with my tutorials, so each tutorial is on a different page and has its own metadata (stored in Vuex, but again that's out of scope). Point is, IMO you'll need at the very least shortname, :identifier, and :url to make it worth it. You don't have to worry about the stuff in the computed: block, though; it's just how I actually used this component. Also, I do recommend conditional rendering with a v-if, if you can find a suitable condition.

In any case, that's how I made Disqus work in my Nuxt site. It works pretty well IMO (and Disqus has a white and dark theme, so you can change to match your site).

I realize some of you reading this may have some qualms about using Disqus (why are you reading this, then, I guess is a good question, but whatever). I get it; personally I think it can be a bit sketchy, and I'm not a big fan of how they use comment data, but when I find a better solution I'll publish another one of these tutorials on how to use it with Nuxt. For now, though, this is the best I got. Hope this was all helpful.

Nuxt, Meet Vuetify

Matthew Piercey — Tue, 14 Apr 2020 03:27:20 +0000

This article is part of a series on my experiences with Nuxt.js that I built into the nuxt-toolkit by OverScore Media

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

See a live example at https://nuxt-toolkit.overscore.media! :]

Well, Nuxt is great. It's my favourite JS framework for the web. Based on the awesome Vue.js, you can't really go wrong. Nuxt is my go-to for building websites and web apps alike, these days, since it can also function as a Static Site Generator.

You probably already know about Nuxt.js, so let's begin. Now, let's add support for the wonderful Vuetify CSS/Vue framework to our Nuxt app.

vuetifyjs / vuetify

🐉 Vue Component Framework

If you're using yarn create nuxt-app, you can easily select Vuetify.js from the list of options for UI frameworks during the interactive installation process. It could take a while, but the process is fairly straightforward. I personally recommend the following options, but your mileage may vary:

? Choose programming language JavaScript
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint, Prettier, Lint staged files, StyleLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

Frankly, I'd choose Jest as a test framework (if I felt like I needed it).

Once that process is all done, you'll have a bunch of defaults available to you (most of which are really quite good). One caveat is that the default font is Roboto, and I actually haven't been able to effectively change it, which is a bit of a shame (though I don't mind Roboto, so I'm not complaining all that much).

There really isn't much more to say at this point. Vuetify's documentation is pretty comprehensive (though you'll likely be looking things up every few minutes until you get used to it).

I particularly like the v-card, v-icon, v-stepper, v-row, v-col, v-dialog, v-btn, and v-divider components. Check 'em out if you have the chance.

If I'm not mistaken, the @nuxtjs/vuetify module imports basically all of the Vuetify components, so you'll have access to the full gamut of its capabilities. Vuetify is OP, IMO, so it gives you plenty to work with, and looks great!

That aside, though, don't expect building with Vuetify to be a complete breeze. It's an adventure, if you know what I mean. One particular nuisance, IMO, is that a lot of the CSS uses !important's, so you'll probably end up having to make your own classes with more specificity than Vuetify's... Though, https://vuetifyjs.com/en/customization/theme/ is cool, as it offers a ton of customization options out-of-the-box (in nuxt.config.js in your Nuxt app). Overall, Vuetify's an excellent choice for really any web project, so by all means take it for a spin. Love it or hate it, you can't deny that it's powerful and useful in the right hands.

Some Iconography (Optional and hacky)

Something I noticed about Vuetify is that it loads in either Material Design Icons or Material Icons (yes, there's a difference; the former includes some non-Google community icons - it's our favourite at OverScore), I kinda forget, from the icon font. Personally, I doubt you'll need to change this, but if you do, this is how you can load in icons programmatically.

Material Design Icons from @mdi/js

Step 1: Disable Loading of Icon Font from CDN

In nuxt.config.js, add the following code to the vuetify: { } object:

defaultAssets: {
  icons: false
},

Step 2: Load in the Icon Package of your Choice

This is where you can BYOI (Bring Your Own Icons). Pick your favourite icon set, and assuming it has an NPM package with SVG paths you can load in dynamically (like @mdi/js). Then add it to your dependencies list with something like yarn add @mdi/js or npm install --save @mdi/js.

Step 3: Put 'em in your Components

Granted, you really don't have to do it this way; the default does work, and it's actually less work. You'll also probably end up breaking some Vuetify components that expect icons... But, this way of doing it gives you a bit more flexibility in terms of what you load in. Since Webpack supports tree-shaking (and assuming the icon package you use does too), you can just load in the icons you need and are using - no more, no less.

Here's my code (you'll have to repeat this same kind of thing for every component - I never said it was easier/better):

<template>
<!-- -->
<v-app-bar :clipped-left="clipped" fixed app>
  <v-icon
    class="mr-5"
    color="#C9C3B2"
    @click.stop="drawer = !drawer"
  >
    {{ burgerSVG }}
  </v-icon>
  <v-toolbar-title v-text="title" />
</v-app-bar>
<!-- -->
</template>

<script>
import { mdiMenu } from '@mdi/js'

export default {
// ...
  data () {
    return {
      burgerSVG: mdiMenu
    }
  }
}
// ...
</script>

Basically, you load in an icon, return it as a named data variable, and insert it inside a <v-icon> component. Pretty cool, huh? Or not. Take it or leave it. Hopefully it's helpful. TTYL all. Stay { home, safe } everybody, and keep on coding!

Programming Parody Songs that Need to be Written

Matthew Piercey — Tue, 17 Sep 2019 18:06:31 +0000

If there's anything I like, it's a good parody. There's just something about the deconstructive nature of a parody that appeals to me for some reason. Maybe, it's for the satirical nature of some parodies that use humour to get across points that would be difficult to communicate otherwise. Perhaps it's because it can be hilarious to hear a familiar song with different words, or a familiar movie scene with a twist. Then again, I think part of the fun of a parody is being able to blend worlds, to communicate concepts in ways traditionally thought impossible.

To that end, I like listening to parody songs. There are a number of Weird Al's gems that have found their way to my playlist, and try as I might I can't seem to get "Revenge" by Captain Sparkles out of my head - not that that's necessarily a bad thing...

Anyway, I especially enjoy parody songs that involve programming, computer science, and the concept of software development. It's a weird niche, I know, but I've found myself in it.

Some of my favourite parodies along this line are from Dylan Beattie, the underrated producer of such bangers as "We're Gonna Build a Framework" and "DMCA."

SUSE's official YouTube channel has a parody playlist that includes tunes like "Uptime Funk," "Code Together," and "Can't Stop the SUSE."

I also like Java's parodies/original songs as well.

Introduction aside, here are my picks for parodies that need to be covered next. Feel free to take these ideas and run with them, as well as commenting below with your own ideas.

What I like about Vue (A parody of "What I like about You" by the Romantics)

Old Repo (A parody of "Old Town Road" by Lil Nas X)

Deprecated (A parody of "Complicated" by Avril Lavigne)

.NET Gonna Give it to Ya (A parody of "X Gonna Give it to Ya" by DMX)

We're Coding (A parody of "Jammin'" by Bob Marley)

The JavaScript I Used to Know (A parody of "Somebody that I Used to Know" by Gotye)

Happy parodying!

Use Bulma and FontAwesome 5 with Nuxt.js

Matthew Piercey — Sat, 07 Sep 2019 22:36:10 +0000

So, you created a new boilerplate site using Nuxt.js. Now what?

Well, maybe you'll want to use a CSS framework to get started with styling your site. Sure, using a framework comes with its own set of advantages and disadvantages, but honestly it can be a great place to start.

If you haven't heard of Bulma yet, I recommend checking it out, since it's pretty awesome. Its class names make a lot of sense, it comes with a good number of components and prefabs out-of-the-box, but not too many that it can be overwhelming if you haven't used it before (looking at you, Vuetify... OK, Vuetify's great too, and it's definitely worth spending the time to get used to it, but this article's about Bulma, so there.)

Anyway, once you have your site all set-up, open up your favourite code editor in your site's project folder, and add Bulma to your package.json:

$ yarn add bulma

Next, you're going to want to add Bulma to your site by importing it. There are actually a few ways of doing this, but the way I'm going to explain it seemed to work for me, so feel free to follow along.

Create a main.scss file in your site's assets/scss/ folder.
Import Bulma's utilities file with the following line of code:

@import "~bulma/sass/utilities/_all";

Add your customizations (like custom brand colours, in this case - see https://bulma.io/documentation/customize/ for more info):

/* Custom colours:
   (These are what we use on our website,
   https://overscorestudios.ml,
   so feel free to experiment with your own
   colours/variables - see https://bulma.io/documentation/customize/
*/

$primary: hsl(242, 100%, 76%);
$primary-invert: findColorInvert($primary);

$info: hsl(337, 55%, 58%);
$info-invert: findColorInvert($info);

$light: hsl(275, 20%, 83%);
$light-invert: findColorInvert($light);

$dark: hsl(0, 0%, 15%);
$dark-invert: findColorInvert($dark);

$link: hsl(242, 100%, 76%);
$link-invert: findColorInvert($link);

$link-hover: hsl(229, 19%, 66%);
$link-focus: hsl(229, 19%, 66%);

$strong-color: hsl(229, 19%, 66%);

$colors: (
    "white": ($white, $black),
    "black": ($black, $white),
    "link": ($link, $link-invert),
    "light": ($light, $light-invert),
    "dark": ($dark, $dark-invert),
    "primary": ($primary, $primary-invert),
    "info": ($info, $info-invert),
    "success": ($success, $success-invert),
    "warning": ($warning, $warning-invert),
    "danger": ($danger, $danger-invert)
);

Import the rest of Bulma:

// The rest of Bulma
@import '~bulma';

Get Nuxt to import your custom styles in all of your custom .Vue files by installing @nuxtjs/style-resources:

$ yarn add @nuxtjs/style-resources

Finally, get Nuxt to recognize your main.scss file by editing the nuxt.config.js file in two places:

  css: [
    '~/assets/scss/main.scss',
  ],

  // ^ Add your main.scss file to Nuxt's Global CSS array

  modules: [
    '@nuxtjs/style-resources'
  ]

  // ^ Make sure to add @nuxtjs/style-resources to Nuxt's modules array
  // (Remember to add a comma if you have more than one module already)

Cool Beans

Now, without any additional finagling, you should be able to use all of Bulma's classes - along with any custom colours - in your .Vue components!

Speaking of which, let's create some components for FontAwesome 5 icons!

Font Whosome?

FontAwesome 5 is a free/premium icon font, one that's super-popular and used on a lot of sites. It includes icons for a lot of major brands, emoji, and a plethora of others that will undoubtedly be useful while you're building your site.

Again, there are a lot of ways to go about adding FontAwesome 5 to your Nuxt site, and if you out there in Internet-land have any suggestions for alternative methods, leave them in the comments below. :]

The big import

In order to use FontAwesome, you'll have to import it. In this case, we'll be using the SVG icon set they offer, though there's also a webfont and a few other things.

Here's the command to install the Node packages you'll need:

$ yarn add @fortawesome/fontawesome-svg-core &&
$ yarn add @fortawesome/free-brands-svg-icons &&
$ yarn add @fortawesome/free-solid-svg-icons &&
$ yarn add @fortawesome/vue-fontawesome &&
$ yarn add nuxt-fontawesome

Feel free to add all of the packages using the same command; it just is easier to show them like this. Basically, you'll need FontAwesome 5 Free's packages for SVG brand/solid icons, as well as their importer packages (for JavaScript in general, and for Vue and Nuxt in specific).

Now, add nuxt-fontawesome to your nuxt.config.js modules list:

  modules: [
    '@nuxtjs/style-resources',
    'nuxt-fontawesome' // Imports FontAwesome 5 SVG icons
  ]

Next, add an array to your nuxt.config.js that looks something like this:

  fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons', // Solid icons
        icons: ['faCookieBite', 'faCommentDots', 'faEnvelope', 'faGrinWink', 'faHeart']
      },
      {
        set: '@fortawesome/free-brands-svg-icons', // Brand icons
        icons: ['faDev', 'faFacebook', 'faTwitter', 'faInstagram', 'faYoutube', 'faGithub']
      }
    ]
  },

Now, you may have noticed that in the above code snippet, I imported a few icons from the Solid set and the Brands set. You technically can import all of them, but I'd really advise against it (unless for some inane reason you actually needed all of them), since keeping your imports smaller keeps your site's bundle size smaller, and your load-times faster!

That being said, you can look up what icons you want to use on FontAwesome's website. Make sure you import any icons using the following schema:

Icon Name: adobe
Import Name: faAdobe (in the brands icons array)

Icon Name: align-left
Import Name: faAlignLeft (in the solid icons array)

If you can't seem to get the hang of it, you can always peer into the murky depths of your site's node_modules folder, in the @fortawesome/free-brands-svg-icons/ or @fortawesome/free-solid-svg-icons folder, and look for the name of the icon you want to import - you'll notice two of each because TypeScript exists and each icon's JS file has a corresponding TypeScript definition file.

Almost There!

Now, you imported the icons, but how do you make them work in your .Vue files?

I chose to create custom components for them, Fas.vue for solid icons and Fab.vue for brand icons:

<!--- components/Fas.vue -->

<!---
  FontAwesome 5 Free Solid Icon Component

  Usage Example:

  <Fas i="arrow-down" />

  Props:
  - i: The FontAwesome 5 Free Solid icon name (like "arrow-up" or "ad")
  - classes: CSS classes to add to the icon

  Caveats:
  - Each icon has to be pre-loaded in nuxt.config.js or it won't show up

-->
<template>
  <font-awesome-icon :class="`${classes}`" :icon="['fas', i]" />
</template>

<script>
export default {
  props: {
    i: {
      type: String,
      required: true,
      default: 'arrow-down'
    },
    classes: {
      type: String,
      required: false,
      default: 'icon is-medium'
    }
  }
}
</script>

<!--- components/Fab.vue -->

<!---
  FontAwesome 5 Free Brands Icon Component

  Usage Example:

  <Fab i="facebook" />

  Props:
  - i: The FontAwesome 5 Free Brands icon name (like "twitter" or "reddit")
  - classes: CSS classes to add to the icon

  Caveats:
  - Each icon has to be pre-loaded in nuxt.config.js or it won't show up

-->
<template>
  <font-awesome-icon :class="`${classes}`" :icon="['fab', i]" />
</template>

<script>
export default {
  props: {
    i: {
      type: String,
      required: true,
      default: 'facebook'
    },
    classes: {
      type: String,
      required: false,
      default: 'icon is-medium'
    }
  }
}
</script>

Is it worth explaining exactly how/why these work? Well, probably not. I really don't think I'm great at teaching Vue to someone who's completely new to it, though I can say that it only took me about 3 months to get confident with using Vue, fiddling around with it on/off. Honestly, it wasn't until I started using Nuxt that it all began to click, and in a couple weeks of off/on experimenting I think I have a pretty good idea of how it works.

My advice to Vue-newbies is honestly to just try building a website from scratch using Vue (or Nuxt, since I really think it does much of the "dirty work" for you, allowing you to focus on writing quality, readable, testable, powerful code). If you already know how to build a website, then it shouldn't be too hard - just get there and try it. If you don't know where to start, I can't recommend FreeCodeCamp enough.

But how though?

Here's an example of a Fab.vue component being used in the wild:

<a href="https://facebook.com/overscorestudios" target="_blank" rel="noreferrer" aria-label="Like us on Facebook">
  <Fab i="facebook" />
</a>

Don't forget to import all custom components in your page/component/layout's <script> tag:

import Fab from '~/components/Fab.vue

export default {
  components: {
    Fab
  }
}

And, you might have noticed that I added an aria-label to the <a> tag in which the <Fab /> was. I'm pretty sure this does what I want it to do - namely, allow screen-reader users to understand what the icon they can't see actually means. Again, I'm no expert on any of this, but from what I can tell it does its job. Make sure to always have accessible fallbacks like that for icons. If they're just decorative, I guess you probably don't need them, but if they are for buttons/links or anything interactive, or if they are important in the context of your page somehow, they really should have aria-labels or something like that. Again, feel free to discuss in the comments.

Well, there you have it! Bulma and FontAwesome should be up-and-running!

Next, I'll cover how to get PurgeCSS to work (to keep your bundle sizes small), how to add a cookie consent banner (and ethical tracking with Matomo), how to add Anime.js (for nifty animations), Typed.js (for typing animations), and Prism.js (for syntax highlighting) to your site, and how to add a news page with Netlify CMS - among other things.

In the mean time, if you're following along and creating a site of your own, it's probably about time to make a Git commit:

git add .
git commit -am "Add Bulma CSS and FontAwesome 5"
git push

Nuxt.js: Go from zero => online in little time

Matthew Piercey — Tue, 27 Aug 2019 03:03:21 +0000

So... you want to make a website, do you?

Do you know how to use HTML? CSS? JavaScript?

Well, what are you waiting for? Get coding!

Not so fast, buckaroo

Alright, so technically you can make a full website with just those three things, but wouldn't it be easier to use a framework? Just think of all the time you'd save - think of all the components you could create - think of all the Node modules you could import!

OK, maybe it's best to go easy on the modules; they add up faster than you'd think. But, you may have a point there - using a framework (properly) can save you a lot of time in the long run, as well as making your coding skills go much further than they would otherwise. Sure, you could do it all from scratch (and that isn't a bad idea, at all), but that takes a lot longer, and especially if you're starting out, you're likely to end up repeating yourself...

Don't Repeat Yourself, developer! That's like, the #1 rule (or at least it's up there).

Surely there must be a reason why so many web developers use frameworks, right? Surely the millions of us framework-users aren't completely crazy. (Granted, some of us definitely are.)

It's settled, then.

So you want to use a framework, and you want to code in JS.

OOH, BOY! there're a lot of them! Which one to choose?

Svelte? Foundation? Riot? Monkberry? Ember? React? Meteor? Marko? Backbone? Angular? Mithril?

...
...
...

What about Vue? You know, the underdog of the three most popular frameworks? The one with the nice-looking green V for a logo? The one supported mostly by Patreon/OpenCollective donors that somehow is able to compete with frameworks supported by big tech like Microsoft, Facebook, Google, etc.? That one?

Yeah, why not?

Vue it is

Don't let this article change your mind. If you're dead set on learning a certain framework, you go for it! Honestly, these days the biggest frameworks are all excellent, have big enough communities to be sustainable, and have enough developer inertia behind them to be supported and updated for years to come.

But, if you do want to learn Vue, let me introduce you to...

Enter Nuxt

Nuxt.js is arguably the quickest way to get up-and-running with a Vue app. It's a framework-on-a-framework, but don't let that scare you off. Its community is surprisingly active, and it's getting new updates all the time.

Nuxt helps you big-time since it comes with a handy-dandy nuxt generate command, which actually builds your .vue files into plain old HTML, JS, and CSS!

Those files can then be hosted on static site hosting sites, like GitHub Pages, Netlify, Surge, Now, and more!

Convinced Yet?

Again, this article isn't meant to pressure you into using Nuxt.js. But, if you want to dive into it as quickly as possible, this article will help you with that.

To begin, you're going to want to have Node.js and Git installed on your computer. A code editor like VS Code will come in handy, as well.

If you're on Windows, a package manager like Choco can help you install nodejs and other things.

Further, I'll be using Yarn, Facebook's Node.js Package Manager, but you can feel free to use trusty old NPM.]

Finally, make sure you've set up Git on your system. Something like this would work:

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

^ Psst... the $ is the placeholder for your command-line cursor. In this case, it means you can perform these commands without root privileges.

Diving in now!

First, navigate to a directory in which you're willing to develop, open up a terminal (in VS Code you can press (CTRL/CMD + SHIFT + P), type in "Terminal", and click on the first result to open a new terminal in your current directory), and get ready for awesomeness!

yarn create nuxt-app nuxt-zero-to-online

summons the mighty create-nuxt-app to quickly spin up a Nuxt.js application (the nuxt-zero-to-online is the folder name, you can change it to whatever you want, or if you're already in the folder in which you want to develop, you can replace the directory name with a period (.).

Yarn will then start downloading some Node.js modules (dependencies, in this case), and this could take a few minutes, depending on your Internet connection.

Soon enough, the progress bars should be finished, and you should be met with a command-prompt saying something like this:

? Project name (nuxt-zero-to-online)

Now, you can just click 'ENTER' if you like it, but you can also name your project something other than its parent folder's name, by typing in a name of your choosing, then pressing 'ENTER' (though, pro-tip: it's way easier to remember the names of your projects if they're in folders of the same names)

Next, you'll see something like:

? Project description (My polished Nuxt.js project)

Same diff here. Take it or change it - press 'ENTER' to continue.

? Author name (Matthew Piercey)

You should know the drill by now...

? Choose the package manager (Use arrow keys)
❯ Yarn
  Npm

Your preference prevails, but Yarn would be my choice. Select your choice with 'ENTER'.

? Choose UI framework (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js

Ooh, here's a fun one! I'm just going to select None right now, simply because this article would be far too long if it delved into each of the options given by this prompt. I'll probably make individual articles for each of these, or at least a few of them, at a later time. This is just one of the ways in which Nuxt really does the heavy lifting for you.

? Choose custom server framework (Use arrow keys)
❯ None (recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

Honestly, I've ever only used None, but I could see how if you're familiar with one of these frameworks it could be helpful to choose one.

However, if I remember correctly, None works best with Nuxt's generator, which is what I'll be using

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯ ◯ Axios
  ◯ Progressive Web App (PWA) Support

I think both of these are useful. Axios is great if you're doing any async requests, and PWA support is also cool, and Nuxt makes it remarkably easy to set-up. Again, the specifics will likely be covered by another article in the future.

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files

Honestly, all of these are cool. I'm selecting all of them.

? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA

Ava.js looks really cool. (I'll be honest, I don't know how to use it... yet.)

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App

I recommend going with Universal (SSR) for generated websites.

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)

Having a jsconfig.json is probably a nice idea.

Let Yarn do its Thing

Yarn will now start building the files of your new Nuxt app, based on the configuration you just gave it.

This, too, could take a few minutes or longer, but it should be finished in a reasonable amount of time.

🎉  Successfully created project nuxt-zero-to-online

  To get started:

        cd nuxt-zero-to-online
        yarn dev

  To build & start for production:

        cd nuxt-zero-to-online
        yarn build
        yarn start

  To test:

        cd nuxt-zero-to-online
        yarn test

✨  Done in 234.70s.

Woot! Woot!

If you've made it this far, you should be seeing the following folders inside your Nuxt app's folder:

assets (where your un-compiled code assets and other things can go)
components (where your custom Vue components can go)
layouts (where your site's layout(s) can go)
middleware (where your Nuxt middleware functions can go)
node_modules (where your local Node.js dependencies live)
pages (where you can put your site's pages)
plugins (where you can configure Vue plugins to work with Nuxt)
static (where you can put static assets like images)
store (where you Vuex store can go)
test (where JavaScript tests can go)

Notice that I put a lot of "can"'s in the list above, since Nuxt really isn't too picky, as long as you tell it what you're doing. Its community prides itself on being the community of a framework that values convention over configuration - while Nuxt gives you tons of options, it helps you fill in several pounds of them, leaving you with only a few "grams" of options about which you absolutely need to think.

You'll also see files like these in the project's root directory:

.babelrc (Manages Babel JS compiler options)
.editorconfig (see Editorconfig.org)
.eslintrc.js (Manages ESLint JS linter options)
.gitignore (A list of files Git isn't supposed to add to any Git repos)
.prettierrc (A configuration file for Prettier)
ava.config.js (A configuation file for Ava.js)
jsconfig.json (Some helpful config for VS Code and some other editors)
nuxt.config.js (The big config file with tons of Nuxt.js options)
package.json (The big Node.js configuration file)
README.md (Gives you some helpful tips)
yarn.lock (A lockfile for Yarn; don't touch; it lists the latest versions of Node.js dependencies and stuff)

Time to test!

$ yarn dev

Boom! Assuming everything worked, you can open your browser to localhost:3000, and you should be looking at a nifty Nuxt logo animation with a couple of buttons.

Git Going!

You can now use git add . followed by git commit -am "First commit with Nuxt.js" to make sure changes to your project's files are being tracked by Git. (The commit message can be whatever you want it to be, BTW).

Now, you can push your code to your favourite Git repository, like one on GitHub, GitLab, BitBucket, GiTea, Gogs, or whatever suits your fancy.

This isn't a Git tutorial, so this article won't cover that bit. But, I will show you how to quickly upload your site to a static host, Surge.sh!

Pro-tip: You can quit the running Nuxt server by pressing (CTRL/CMD+C)

yarn generate

Now, the moment of truth! Use the above command to summon Nuxt's mighty Static Site Generator (SSG). You should now notice a dist/ folder in your project's root, and after a bit of weird-looking mumbo-jumbo:

yarn run v1.17.3
$ nuxt generate
ℹ Production build                                                                                                                                                                                         22:47:57
✔ Builder initialized                                                                                                                                                                                      22:47:57
✔ Nuxt files generated                                                                                                                                                                                     22:47:57

✔ Client
  Compiled successfully in 5.78s

✔ Server
  Compiled successfully in 1.35s


Hash: c976a06b8539501cf9c6
Version: webpack 4.39.2
Time: 5779ms
Built at: 2019-08-26 22:48:05
                         Asset       Size  Chunks             Chunk Names
../server/client.manifest.json   7.57 KiB          [emitted]  
       0e80d025a1d59071f604.js   46.1 KiB       0  [emitted]  app
       1810f9b2a94a668fce75.js    164 KiB       1  [emitted]  commons.app
       909acf276b8f95d7b778.js   4.27 KiB       4  [emitted]  
                      LICENSES  510 bytes          [emitted]  
       a282e69f670b5d4ce1ee.js    3.6 KiB       2  [emitted]  pages/index
       aef96f98834c826077de.js   2.33 KiB       3  [emitted]  runtime
     icons/icon_120.46472c.png   3.05 KiB          [emitted]  
     icons/icon_144.46472c.png   3.78 KiB          [emitted]  
     icons/icon_152.46472c.png   3.96 KiB          [emitted]  
     icons/icon_192.46472c.png   5.01 KiB          [emitted]  
     icons/icon_384.46472c.png     11 KiB          [emitted]  
     icons/icon_512.46472c.png   13.9 KiB          [emitted]  
      icons/icon_64.46472c.png   1.61 KiB          [emitted]  
        manifest.7f1df9dc.json  789 bytes          [emitted]  
 + 2 hidden assets
Entrypoint app = aef96f98834c826077de.js 1810f9b2a94a668fce75.js 0e80d025a1d59071f604.js

Hash: cbd81db0590a2ba9060f
Version: webpack 4.39.2
Time: 1353ms
Built at: 2019-08-26 22:48:06
                  Asset       Size  Chunks             Chunk Names
3899b046024edc17e008.js   3.65 KiB       1  [emitted]  pages/index
              server.js     32 KiB       0  [emitted]  app
   server.manifest.json  243 bytes          [emitted]  
 + 2 hidden assets
Entrypoint app = server.js server.js.map
ℹ Generating pages                                                                                                                                                                                         22:48:06
✔ Generated /                                                                                                                                                                                              22:48:06
✨  Done in 11.90s.

You should now be good to continue!

(If you're the more adventurous type, you could try looking inside this folder, but don't be surprised if it's a little much to understand...)

Get online!

yarn global add surge

This command will get Yarn to install the Surge CLI globally. Again, don't let this article stop you from using your favourite static host, or a server of your own.

surge dist/

Let's get started! The above command starts the surge.sh CLI, telling it that your static site lives in the dist/ folder:

   Welcome to surge! (surge.sh)
   Login (or create surge account) by entering email & password.

          email:

Enter the e-mail you want to use with Surge.sh, create a password or enter yours if you already have one, then press ENTER to select your project: and domain:.

        project: dist/
         domain: faded-able.surge.sh
         upload: [====================] 100% eta: 0.0s (20 files, 310371 bytes)
            CDN: [====================] 100%
             IP: 45.55.110.124

   Success! - Published to faded-able.surge.sh

Oh, yeah!

The End?

Look, I already know what you're thinking. "But you didn't even show us how to use it! You just talked a bit about Nuxt and did a tiny bit of setup!"

Granted, you're right. But, often the hardest part of a software/website project is knowing where/how to start. If you're looking to get into Nuxt.js, this is one way to start.

If you're ready to dive in deeper, be my guest. But, if you want more from this series, you won't have to wait long. Over the next few weeks, I'll be releasing a few more of these, covering everything from CSS frameworks to cookies and analytics. TTYL?

DEV Community: OverScore Media

Going Deeper with Nuxt

For Starters

HOW TO: Update all npm packages in your project at once | by Jhey Tompkins | Medium

Jhey Tompkins ・ Apr 12, 2018 ・ Medium

That out of the way...

Nuxt, Meet Vuetify

Matthew Piercey for OverScore Media ・ Apr 14 '20

Nuxt, Meet Particles

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

VincentGarreau / particles.js

A lightweight JavaScript library for creating particles

particles.js

A lightweight JavaScript library for creating particles.

Demo / Generator

Usage

Here's the Code

Nuxt, Meet Vue-Picture-Swipe

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

Get the Library

rap2hpoutre / vue-picture-swipe

🖼 Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe

Make the Nuxt Plugin

The Implementation of it All

Nuxt, Meet Plyr

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

sampotts / plyr

A simple HTML5, YouTube and Vimeo player

Features

The Component in Question

redxtech / vue-plyr

A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.

Nuxt, Meet Prism

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

Look into the Prism

Ready?

Use it for realsies

Caveat(s)

Nuxt, Meet Disqus

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

ktquez / vue-disqus

Integrate Disqus count and comments in your application Vue 3, with support for SPA

Installation Process

Save as a Dependency

Make a Plugin

Make it a Component

Nuxt, Meet Vuetify

overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

vuetifyjs / vuetify

🐉 Vue Component Framework

Some Iconography (Optional and hacky)

Material Design Icons from @mdi/js

Step 1: Disable Loading of Icon Font from CDN

Step 2: Load in the Icon Package of your Choice

Step 3: Put 'em in your Components

Programming Parody Songs that Need to be Written

What I like about Vue (A parody of "What I like about You" by the Romantics)

Old Repo (A parody of "Old Town Road" by Lil Nas X)

Deprecated (A parody of "Complicated" by Avril Lavigne)

.NET Gonna Give it to Ya (A parody of "X Gonna Give it to Ya" by DMX)

We're Coding (A parody of "Jammin'" by Bob Marley)

The JavaScript I Used to Know (A parody of "Somebody that I Used to Know" by Gotye)

Use Bulma and FontAwesome 5 with Nuxt.js

So, you created a new boilerplate site using Nuxt.js. Now what?

Cool Beans

Font Whosome?

The big import

Almost There!

But how though?

Nuxt.js: Go from zero => online in little time

Not so fast, buckaroo

It's settled, then.

Vue it is

Enter Nuxt

Jhey Tompkins ・ Apr 12, 2018 ・
Medium

`Demo / Generator`

`Usage`