starter nuxt ionic tailwind firebase

nuxt 3 Ionic Tailwind Firebase 최소 스타터

자세한 내용은 NUXT 3 문서를보고 자세히 알아보십시오.

• Nuxt Ionic Module -https://ionic.nuxtjs.org/
• nuxt supabase 모듈 - https://supabase.nuxtjs.org/
• Nuxt Tailwind 모듈 -https://tailwindcss.nuxtjs.org/
• nuxt vuefire- https://vuefire.vuejs.org/nuxt/getting-started.html
  • 인증 문제 : Firebase/Firebase-JS-SDK#5019
• Ionic vs Code Extension -https://ionicframework.com/docs/intro/vscode-extension

Ionic Extension을 사용하기 위해 package.json 변경하고 모바일 장치 용 앱 빌드

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

changes nuxt.config.ts 이온 확장을 사용하고 모바일 장치에 대한 앱 빌드 앱을 만들려면 ssr:false and auth:false for VureFire를 설정해야합니다.

 export default defineNuxtConfig({
  modules: ["@nuxtjs/ionic", "@nuxtjs/tailwindcss", "nuxt-vuefire"],
  ssr: false,
  vuefire: {
    auth: false,
    config: {
      apiKey: process.env.FIREBASE_API_KEY,
      projectId: process.env.FIREBASE_PROJECT_ID,
      appId: process.env.FIREBASE_APP_ID,
    },
  },
  ionic: {
    css: {
      utilities: true,
    },
  },
});

capacitor.config.ts 변경 Ionic Extension을 사용하고 모바일 장치 용 앱을 빌드하려면 Webdir를 dist 로 설정해야합니다.

 import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'nuxt-ionic-playground',
  webDir: 'dist',
  bundledWebRuntime: false,
}

export default config

Firebase 문제 해결

커패시터의 Firebase 문제로 인해 장치에서 실행할 때 사용해야하는 GetAuth Composable을 썼습니다.

 import {
  indexedDBLocalPersistence,
  initializeAuth,
} from "firebase/auth";
import { getApp } from "firebase/app";
export const useFbAuth = () => {
  let auth;
  console.log("use persistence");
  auth = initializeAuth(getApp(), {
    persistence: indexedDBLocalPersistence,
  });
  return auth;
};