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,
Top comments (0)