Merge pull request #7 from srav001/1.1.0

1.1.0

.eslintrc.js

@@ -7,24 +7,33 @@ module.exports = {
         'plugin:@typescript-eslint/recommended',
         'plugin:vue/vue3-recommended',
         '@vue/airbnb',
-        'prettier'
+        'prettier',
     ],
     rules: {
         'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'warn',
         'no-debugger': 'off',
         'vue/no-deprecated-slot-attribute': 'off',
-        "import/extensions": [ 2, {
-            'js': "always",
-            'vue': "always",
-            'ts': "never",
-          }],
+        'import/extensions': [
+            2,
+            {
+                js: 'always',
+                vue: 'always',
+                ts: 'never',
+            },
+        ],
+        'vue/multi-word-component-names': [
+            'error',
+            {
+                ignores: ['Index', 'Home', 'About'],
+            },
+        ],
     },
     settings: {
         'import/resolver': {
-            'typescript': {}
+            typescript: {},
         },
     },
     parserOptions: {
-        parser: "@typescript-eslint/parser"
+        parser: '@typescript-eslint/parser',
     },
-};
+};

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --verbose --edit 

README.md

@@ -1,28 +1,24 @@
 # A Production Ready Starter Template
 
-Well I think the title says it all. This is a starter template aimed to be used at apps that will go into production release. It has eslint, prettier and ionic added to it, so that not only does linting and formatting like most projects but also can be made a mobile app when needed with capacitor.
+Well I think the title says it all. This is a starter template aimed to be used at apps that will go into production release. It has eslint, prettier and ionic added to it, so that not only does linting and formatting like most projects but also can be made a mobile app when needed with capacitor. It is opinionated to an extend, but at the same time easy to customize since it has minimal config for all packages.  
 
 -   `It uses the latest tech in vue ecosystem. For example pinia for store and vite for building.` [Click here for more info](https://twitter.com/youyuxi/status/1464058813649088516?lang=en)
 
-## Why Bootstrap and Tailwind together ?
+## New in 1.1.0!
 
-Simple, I think bootstrap's grid is most superior in terms of functionality compared to rest like bulma. At the same time it is easy to use. That is why only the grid system from Bootstrap is used.
+-   UnoCSS replaces tailwind and bootstrap packages. [Click here for more info](https://github.com/unocss/unocss)
+-   Routing now works by using file system with the help of `vite-plugin-pages`. [Click here for more info](https://github.com/hannoeru/vite-plugin-pages)
 
-### Then why tailwind also ?
-
-As given in the example you can write all your classes in a stylesheet with `@apply` added to a class and use it. Thus keeping your html clean ( Alot people hate that about tailwind, when your html is filled with classes).
-
-### So then why use Tailwind instead of writing css as it is instead of tailwind classes ?
-
-When there are more than 1 person working on project, maintaining a structure or format for classes and variables can be difficult. By using tailwind classes in your stylesheet ( or directly in your HTML ) it makes it easy. Plus tailwind has excellent documentation.
+### Why UnoCSS and bootstrap grid 🤔 ?
+UnoCSS is awesome, since it's on-demand ( it offers low bundle size ) while providing access to multiple css utilty class from the likes of tailwind. Bootstrap's grid is included simply because I think bootstrap's grid is most superior in terms of functionality compared to rest like bulma while being easy to use ( Can be removed by deleting file in `src/assets/bootstrap-grid.min.css`). 
 
 ## Why use this template ?
 
 -   You might don't want to go through the hassle of setting up linter, formatter, router, store etc and still want the [latest vue](https://twitter.com/youyuxi/status/1464058813649088516?lang=en) has to offer ( All of it is setup ).
 -   If you use the ionic components as your base for components, in future you can build your web app as an android or ios app with capacitor.
 -   You can remove - all capacitor dependencies from `package.json` and `capacitor.config.js` to get all other features except build a mobile app.
+-   Eslint for linting and prettier for formatting files ( and yes both work combined without issues ).
 -   Husky is setup and is being used for commit linting.
--   Eslint for linting and prettier for formatting files.
 -   Vite is used for superior dev experience..
 
 ###
@@ -38,5 +34,5 @@ Note:
 ```
 pnpm project-setup: 'Runs pnpm install and setups up husky for commit linting'
 pnpm lint: 'Runs eslint in src directory and fixes all autofixeable errors'
-pnpm format: 'Runs src directory through prettier and formats all files and'
+pnpm format: 'Runs src directory through prettier and formats all files'
 ```

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-ionic-template",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "A production ready starter template for projects with ionic-vue with linting, formatter etc pre-configured.",
     "main": "./src/main.ts",
     "scripts": {
@@ -10,7 +10,7 @@
         "test": "echo \"Error: no test specified\" && exit 1",
         "project-setup": "pnpm install && rm -rf .husky && npx husky install && npx husky add .husky/commit-msg 'npx --no -- commitlint --verbose --edit $1' ",
         "format": "npx prettier --write --config ./.prettierrc.js src",
-        "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src"
+        "lint": "npx eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src"
     },
     "repository": {
         "type": "git",
@@ -30,7 +30,6 @@
         "@capacitor/status-bar": "1.0.8",
         "@ionic/vue": "^6.1.12",
         "@ionic/vue-router": "^6.1.12",
-        "bootstrap": "^5.1.3",
         "pinia": "^2.0.14",
         "vue": "^3.2.37",
         "vue-router": "^4.0.16"
@@ -42,19 +41,19 @@
         "@types/node": "^18.0.0",
         "@typescript-eslint/eslint-plugin": "^5.30.3",
         "@typescript-eslint/parser": "^5.30.3",
+        "@unocss/transformer-directives": "^0.44.3",
         "@vitejs/plugin-vue": "^2.3.3",
         "@vue/eslint-config-airbnb": "^6.0.0",
-        "autoprefixer": "^10.4.7",
         "eslint": "^8.19.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-import-resolver-typescript": "^3.1.5",
         "eslint-plugin-vue": "^9.1.1",
         "eslint-plugin-vuejs-accessibility": "^1.2.0",
         "husky": "^8.0.1",
-        "postcss": "^8.4.14",
         "prettier": "^2.7.1",
-        "tailwindcss": "^3.1.4",
+        "unocss": "^0.44.3",
         "vite": "^2.9.13",
+        "vite-plugin-pages": "^0.25.0",
         "vue-tsc": "^0.38.2"
     }
 }