Build A Mobile App Starter Template With Nuxt, Supabase, Tailwind, Ionic Framework and Capacitor

Build A Mobile App Starter Template With Nuxt, Supabase, Tailwind, Ionic Framework and Capacitor

In this video, we'll be creating a simple mobile application starter template with Nuxt.js, Supabase, Tailwind CSS, and Ionic Framework. We'll be using the Supabase for data storage and authentication, and Tailwind for CSS for styling the user interface. We'll also be using Ionic Framework and Ionic Capacitor for creating a native mobile application and presenting a mobile user experience.

This video will give you a good understanding of how to use these frameworks together, and get you started with creating your own mobile projects!

We also cove changes to configuration to successfully deploy the solution on mobile devices.

aaronksaunders / starter-nuxt-ionic-tailwind-supabase

Nuxt 3 Ionic Tailwind Supabase Minimal Starter

Nuxt 3 Ionic Tailwind Supabase Minimal Starter

Look at the Nuxt 3 documentation to learn more.

• Nuxt Ionic Module - https://ionic.nuxtjs.org/
• Nuxt Supabase Module - https://supabase.nuxtjs.org/
• Nuxt Tailwind Module - https://tailwindcss.nuxtjs.org/
• Nuxt Supabase Module - https://supabase.nuxtjs.org/
  • Auth Issue: nuxt-modules/supabase#144
• Ionic VS Code Extension - https://ionicframework.com/docs/intro/vscode-extension

changes package.json for using ionic extension and build apps for mobile devices

  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi generate",
    "ionic:build": "npm run build",
    "ionic:serve": "npm run dev"
  },

changes nuxt.config.ts for using ionic extension and build apps for mobile devices, you must set ssr:false

export default defineNuxtConfig({
  modules: ["@nuxtjs/ionic", "@nuxtjs/supabase", "@nuxtjs/tailwind"],
  ssr: false, 
  supabase: {},
  ionic: {
    integrations: { },
    css: {
      utilities: true,
    },
  },
});

changes capacitor.config.ts for using ionic extension and build apps for mobile devices, you must set webDir to dist

import { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'nuxt-ionic-playground',
  webDir: 'dist',
  bundledWebRuntime: false,

…

View on GitHub