2.Nuxt Ionic From Scratch

2.1. Nuxt module ionic

see https://ionic.nuxtjs.org/get-started/installation

## env
node -v ## v20.16.0
pnpm -v ## 9.9.0

## init
pnpm dlx [email protected] init professional-razor
cd professional-razor

#pnpm dlx [email protected] module add ionic
pnpm add -D @nuxtjs/ionic

fix version, move to DevDeps

{
  "devDependencies": {
+   "@nuxtjs/ionic": "^0.15.1",
    "nuxt": "^3.12.4",
    "vue": "^3.4.38"
  },
+ "packageManager": "[email protected]"
}

set ssr to false, add ionic module

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
+ modules: ['@nuxtjs/ionic'],
+ ssr: false,
})

remove server and start dev

rm -rf server
pnpm install
pnpm dev -o

2.2. Unocss module

see https://unocss.dev/integrations/nuxt

pnpm add -D unocss @unocss/nuxt @unocss/core
pnpm add -D @unocss/preset-icons @unocss/preset-wind @iconify-json/mdi

cat > uno.config.ts <<'EOF'
import { mergeConfigs } from '@unocss/core';
import config from './.nuxt/uno.config.mjs';

export default mergeConfigs([config, {
  // your overrides
}]);
EOF

edit nuxt-config to add unocss config

+import presetIcons from '@unocss/preset-icons';
+import presetWind from '@unocss/preset-wind';

export default defineNuxtConfig({
- modules: ['@nuxtjs/ionic'],
+ modules: ['@nuxtjs/ionic', '@unocss/nuxt'],
+ unocss: {
+   nuxtLayers: true,
+   presets: [presetWind(), presetIcons()],
+ },
});

2.3. Eslint module

see https://eslint.nuxt.com/packages/module

pnpm add -D @nuxt/eslint eslint typescript vite-plugin-eslint2

cat > eslint.config.mjs <<'EOF'
import withNuxt from './.nuxt/eslint.config.mjs';

export default withNuxt(
  // your custom flat configs go here, for example:
  // {
  //   files: ['**/*.ts', '**/*.tsx'],
  //   rules: {
  //     'no-console': 'off' // allow console.log in TypeScript files
  //   }
  // },
  // {
  //   ...
  // }
);
EOF

edit nuxt-config to add eslint config

export default defineNuxtConfig({
- modules: ['@nuxtjs/ionic', '@unocss/nuxt'],
+ modules: ['@nuxtjs/ionic', '@unocss/nuxt', '@nuxt/eslint'],
+ eslint: {
+   checker: true,
+   config: {
+     stylistic: {
+       semi: true,
+     },
+   },
+ },
});

add script to package.json

"scripts": {
+ "lint": "eslint .",
+ "lint-fix": "eslint . --fix"
},

set .vscode/settings.json

+ "eslint.format.enable": true,
+ "eslint.useFlatConfig": true,
+ "editor.formatOnSave": true,
+ "editor.defaultFormatter": "dbaeumer.vscode-eslint"

2.4. Ts types and check

see https://nuxt.com/docs/guide/concepts/typescript

pnpm add -D vue-tsc typescript

add script to package.json

"scripts": {
+ "type-check": "nuxi typecheck",
},

edit nuxt-config to add eslint config

export default defineNuxtConfig({
+ typescript: {
+   typeCheck: true,
+ },
});

2.5. other deps

## add vue deps
pnpm add @ionic/vue @ionic/vue-router ionicons

## declare png types
mkdir types
cat >> types/modules.d.ts <<"EOF"
declare module '*.png' {
  const content: string;
  export default content;
}
EOF