Vue 3 - My TypeScript Development Environment Setup

.eslintignore

.eslintrc.js
*.config.js
*.config.ts

.eslintrc-optional.json

{

  "env": {
    "browser": true,
    "es6": true
},
"extends": [
  "plugin:vue/vue3-recommended",
  "plugin:@typescript-eslint/recommended",
  "airbnb-typescript/base"
],
"globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
},
"parser": "vue-eslint-parser",
"parserOptions": {
    "ecmaVersion": 2018,
    "parser": "@typescript-eslint/parser",
    "sourceType": "module",
    "project": "tsconfig.json",
    "tsconfigRootDir": "./",
    "extraFileExtensions": [ ".vue" ]
},
"plugins": [
  "vue",
  "@typescript-eslint"


],
"rules": {
},
"settings": {
  "import/resolver": {
    "alias": {
      "map": [
        ["@classes", "./src/classes/"]
       
      ],
      "extensions": [".ts", ".js", ".jsx", ".json"]
    }
  }
}


}

.eslintrc.json

{

  "env": {
    "browser": true,
    "es6": true
},
"extends": [
  "plugin:vue/vue3-recommended",
  "plugin:@typescript-eslint/recommended",
  "airbnb-typescript/base"
],
"globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
},
"parser": "vue-eslint-parser",
"parserOptions": {
    "ecmaVersion": 2018,
    "parser": "@typescript-eslint/parser",
    "sourceType": "module",
    "project": "tsconfig.json",
    "tsconfigRootDir": "./",
    "extraFileExtensions": [ ".vue" ]
},
"plugins": [
  "vue",
  "@typescript-eslint"


],
"rules": {
},
"settings": {

}


}

App.vue

<template lang="pug">
  img(alt="Vue logo" src="./assets/logo.png")
  HelloWorld(msg="Hello Vue 3.0 + Vite")
</template>

<script lang="ts>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

main.css

@tailwind base;

@tailwind components;

@tailwind utilities;

main.ts

import { createApp } from 'vue';

import App from './App.vue';
import './index.css';

createApp(App).mount('#app');

postcss.config.js

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');
const postcssnested = require('postcss-nested');
    module.exports = {
    plugins: [
        tailwindcss,
        postcssnested({ bubble: ['screen', 'variants', 'responsive']}),
        autoprefixer,
    ],
};

Profile.ts

interface User {
    id: string,
    email: string
}

interface Profile extends User {
    avatar: string,
    firstname: string,
    lastname: string
}

export { User, Profile };

shims-vue-d.ts

declare module '*.vue' {
  import { defineComponent } from 'vue';

  const component: ReturnType<typeof defineComponent>;
  export default component;
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@classes/*" :[
        "src/classes/*"
      ] 
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

vite.config.ts

import type { UserConfig } from 'vite'
import tsResolver from 'vite-tsconfig-paths'

const config: UserConfig = {
    resolvers: [tsResolver],
}

export default config