Ionic Nuxt Template

A simple template for creating Ionic applications with Nuxt.js. This template is set up to work seamlessly with iOS and Android development.

Prerequisites

• Node.js (latest LTS version recommended)
• Xcode (for iOS development)
• Android Studio (for Android development)
• Ionic CLI (npm install -g @ionic/cli)

Getting Started

# Clone this repository
git clone <your-repository-url> my-ionic-app
cd my-ionic-app

# Install dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Run on iOS simulator
npm run ios

# Run on Android simulator/device
npm run android

Features

• Ionic components auto-imported
• Tabs layout pre-configured
• Ready for iOS and Android deployment
• Customizable theme

Project Structure

├── assets/
│   └── css/
│       └── ionic.css        # Custom Ionic theme variables
├── pages/
│   ├── tabs.vue             # Main tabs layout
│   └── tabs/
│       ├── home/
│       │   └── index.vue    # Home tab content
│       └── about/
│           └── index.vue    # About tab content
├── public/
├── scripts/
│   └── ios.sh               # Helper script for iOS development
├── app.vue                  # Main app component
├── nuxt.config.ts           # Nuxt configuration
├── package.json
└── README.md

Development

Web Development

Run the development server:

npm run dev

This will start a development server at http://localhost:3000.

iOS Development

To run the app on an iOS simulator:

# In one terminal
npm run dev

# In another terminal
npm run ios

This will build the app, sync it to iOS using Capacitor, and open it in an iOS simulator.

To run from there:

1. Update the App signing to your team and unique bundle identifier

2. Press the Play button to load onto a simulator or device.

Troubleshooting

1. Open Console.app to view logs

Android Development

To set up for Android development, create a script similar to the iOS one:

# Create the Android script
cat > scripts/android.sh << 'EOF'
#!/bin/bash
LIP=$(ipconfig getifaddr en0)

echo "🍦 Starting local development to Android device - ensure local dev server is running already"
echo "🏗️ Type checking and building for development..."
npm run build
echo "🔃 Capacitor installation, sync and copy to app distribution folders..."
npx @ionic/cli capacitor sync android --no-build
echo "🏃 Select an Android device to run the build at local ip address ${LIP} on..."
eval "npx @ionic/cli capacitor run android --livereload-url=http://${LIP}:3000 --external --mode development"
EOF

# Make it executable
chmod +x scripts/android.sh

# Add it to package.json scripts

Then run:

# In one terminal
npm run dev

# In another terminal
npm run android

Customization

Theme

Edit the assets/css/ionic.css file to customize the Ionic theme variables.

Layout

Modify the tab structure in pages/tabs.vue to add or remove tabs.

Adding New Pages

Create new pages in the pages/tabs/ directory, organized by tab, to maintain the correct routing structure.

Building for Production

# Build the web application
npm run build

# Sync with iOS
npx @ionic/cli capacitor sync ios

# Sync with Android
npx @ionic/cli capacitor sync android

Deployment

Web

Deploy the built application from the dist directory to your web hosting provider.

iOS

Open the iOS project in Xcode:

npx cap open ios

Then build and archive for distribution through the App Store.

Android

Open the Android project in Android Studio:

npx cap open android

Then build and generate an APK or App Bundle for distribution through the Play Store.

License

MIT