Vue-Windi-Capacitor-App.md

Vue-Windi-Capacitor App

This guide should help get you started developing with Vue.js and Windi CSS using Capacitor.

First things first

There are some prerequisites you need to have installed before you can start developing.

Node.js

You need to have Node.js installed on your machine. You can download it from here.

Android Studio & Android SDK

You need to have Android Studio installed on your machine. You can download it from here. You also need to have the Android SDK installed. You can install it from Android Studio. You can find more information about it here.

Create a Vue app

Interactively create a new Vue app:

npm init vue@latest

If you're using VSCode with TypeScript, you will need to disable the built-in TS extension. Go to the extensions tab and search for @builtin typescript. Disable it for this workspace.

For more information about creating or using Vue apps, check out the Vue documentation.

Install Windi CSS

npm i -D vite-plugin-windicss windicss

Put this in your vite.config.js (.ts if you're using TypeScript) file:

import WindiCSS from "vite-plugin-windicss";

export default {
  plugins: [WindiCSS()],
};

Finally, put this in your main.js file:

import "virtual:windi.css";

For more information about using Windi CSS, check out the Windi CSS documentation.

Capacitor

Install

Install the dependencies:

npm i @capacitor/core
npm i @capacitor/android
npm i -D @capacitor/cli

Build your Vue project:

npm run build

Initialize Capacitor:

npx cap init
npx cap add android
npx cap sync
npx cap open android

This will install all dependencies, build the project and open Android Studio. Wait until it has finished building the project, then you can close Android Studio.

Adding custom icon and splash screen

First, install cordova-res:

npm install -g cordova-res

Replicate the following directory structure from your project root:

resources/
├── android/
│   ├── icon-background.png
│   ├── icon-foreground.png
├── icon.png
└── splash.png

The icons should be at least 1024x1024 and the splash screen should be at least 1920x1920 pixels.

Run the following command:

cordova-res android --skip-config --copy

Lastly, open the XML files in /android/app/src/main/res/mipmap-anydpi-v26/ and replace any @color to @mipmap

Read more

For more information about Capacitor, check out the Capacitor documentation.

Running the app

To run in the browser for development, just run:

npm run dev

If you want to run it on an Android device or emulator, just use the Ionic extension for VS Code.

To run it on your Android device, you need to have USB debugging enabled.