Mapbox is super cool. 🥳 Vue 3 is super cool. 🥳
Bringing them together can be a bit tricky though.
In this article we will look at how to use a Vue 3 (single file) component as content of a Mapbox popup, while keeping full reactivity and all features of Vue 3 that we so love.
TLTR; In Step 1–3 we will quickly set up a Vue 3 project that uses Mapbox and displays a layer that we want to click on to show the dropbox. …
This will be a very short guide on how to deploy your Nuxt SPA app on Amazon (AWS) Amplify development platform in a way dynamic routes work properly.
Let’s get started! <:o)
1) Create a Nuxt App
Follow the instructions on the link below to create a basic nuxt app:
https://github.com/nuxt/create-nuxt-app
npx create-nuxt-app <my-project>❗️️ Make sure to replace “<project-name>” with your project-name!
You can choose which options you like yourself, but make sure to have rendering mode “SPA” applied so it’s a Single-Page-Application.
2) Setting Up the app in AWS Amplify
❗️️If you haven’t set up an AWS account and a project yet, please do so now on http://www.aws.com.
I recently came across the use case where I needed to schedule a Firebase Cloud Function on a daily basis. I wanted a function that sends an email to my users via Amazon SES every night. A very common use case I’d say.
Since Firebase does not provide a scheduling functionality for its functions (yet), you need to find some other way to schedule a function. And there is a very easy way offered by Google itself: The Google Cloud Scheduler.
So let’s get started.
I am assuming that you already have a cloud function you call via your app…
This article will help you deplyoing a Nuxt 2.0 application to Google’s App Engine — in no time 🔥.
❗️️Update: I now also updated the official Nuxt documentation with a guide for Google App Engine, check it out: https://nuxtjs.org/faq/appengine-deployment
1) Install Nuxt.js
⏭ skip to section 2 if you already have a Nuxt.js project running ⏭
Follow the instructions on the link below to create a basic nuxt app:
https://github.com/nuxt/create-nuxt-app
npx create-nuxt-app <my-project>❗️️ Make sure to replace “<project-name>” with your project-name!
You can choose which options you like yourself, but make sure to have rendering mode “universal” applied so it is a…
This article will help you integrate Firebase Firestore into a Nuxt.js project while keeping the server-side rendering capabilities that come with the amazing Universal SSR mode of Nuxt.js.
And all of this without the need for any additional libraries other than Google’s own Firebase SDK.
❗️️️️️️❗️️️️️️ Update: If you like it even simpler: I wrote a small Nuxt module nuxt-fire (now @nuxtjs/firebase) that has made it to be an official nuxtjs module and makes integrating Firebase into your Nuxt 2.0 project even easier!
Check it out: https://firebase.nuxtjs.org
❗️️ This article is based on Nuxt.js v2.x and might not be valid…
This article will help you integrate Firebase Firestore into a Nuxt.js project while keeping the server-side rendering capabilities that come with the amazing Universal SSR mode of Nuxt.js.
And all of this without the need for any additional libraries other than Google’s own Firebase SDK.
❗️️ NEWER ARTICLE! This article is based on Nuxt.js Version 1.x. If you are working with the newer Nuxt 2.0, check out this article:
https://medium.com/@pascalluther/nuxt-js-v2-firestore-ssr-938d8fb7d2b0
1) Install Nuxt.js
⏭ skip to section 2 if you already have a Nuxt.js project running ⏭
First, install the vue-cli if you haven’t already:
npm install -g @vue/cli @vue/cli-init
Pascal Luther
Cloud Product Architect by day, recreational web-developer by night. Currently a big fan of Vue & Nuxt.js and of going serverless with Google Firebase.
