Copy any text to the clipboard in Vue 3 with the new Vue composition API.
TL;DR: Use vue-clipboard3 (I maintain this package)
Today I needed to copy some text to the clipboard in my new Vue app where I’m using Vue 3 and the composition api.
I didn’t want to use a Vue directive as this seems a little messy and not so declarative, and the existing solutions either don’t work in Vue 3, don’t have good typescript support, are used as a Vue plugin binding to ‘this’ or are a hack of a Vue 2 solution.
To statically generate your site, or use server-side rendering… That is the question. I propose a novel solution — do both from the same codebase with Nuxt.js and Google cloud 🚀
I’m starting a new project and, as every developer knows, that means time to refactor! The project is a modern, pay-for-use VPN service that puts the user in control and uses WireGuard under the hood. I don’t have a link to share yet, but I’ll update this article when I have something to show after Christmas. …
Boost your Firestore and TS skills with a couple of lines of clean code.
TLDR;
Typesafe read/write with Firestore:
GIST with comments and examples
Clean GIST
The Problem:
Something that’s been on my TODO for a while now has been to figure out a slick and clean way of using Firestore in a more type-safe way. I was fed up of doing:
const someData = firebaseDocumentRef.data() as SomeTypeI have to import the type in each file I use it. What if I get the type wrong? More code to write etc. etc.
Something else that gives me the chills is having…
For our most recent project we are using a mono-repo setup with Lerna and Yarn workspaces which gives us an excellent opportunity to create our own local Node packages, writing more maintainable and useable code. All of our front end apps run on Nuxt.js and I quite quickly found that I needed to install Vue plugins, and add to the Vuex store from within a module, while still keeping the context of the Nuxt app.
In this post, I will explain with code examples how to create a Nuxt module as a local Node package. This could be easily extended…
Learn how to create a shared side drawer using RadSideDrawer in NavtiveScript Vue 2
TL;DR:
Creating a sidedrawer that is shared between pages can save memory, minimize CPU usage, and give a boost to performance. Check out this repo to get your hands on the code!
Coming from the wold of web app development I initially found that native dev sucked. It felt clunky, unintuitive, non-reliable and under-documented. As well as that, you were pretty much tied to using React or Angular and missing out on the awesomeness of Vue. Ohh and signing your app and publishing to the app store was a nightmare compared to my usual npm run generate && firebase deploy…
Jamie Curnow
I am a javascript developer living in beautiful Cornwall, UK. Ever curious, always learning.
