TypeScript cannot find module (vue file) when the path is included

I am trying to import LoginForm.vue from ./resources/scripts/views/auth/LoginForm
but TypeScript won’t recognize the path.

Also, I am importing it into a router module file in /resources/scripts/plugins/router/modules/AuthenticationRouter.ts

Also, I noticed that TypeScript won’t recognize Vue files that is not in the root directory ‘@’ or ‘./resources/scripts/’ and I have been trying to edit the include rules to try to fix it.

Please ignore the code in the export default because I haven’t changed it yet

import LoginForm from '@/views/auth/LoginForm'

export default [
        path: '/auth/login',
        component: LoginForm,
        children: [
                path: '',
                name: 'people-welcome',
                component: Welcome,



<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import LoginFormContainer from '@/components/auth/LoginFormContainer';

        components: { LoginFormContainer }
    export default class LoginForm extends Vue {

<style scoped>



  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "rootDir": "./resources/scripts/",
    "paths": {
      "@/*": [
    "typeRoots": [
    "lib": [
  "include": [
  "exclude": [


// I have no idea how this code works, but I found it on the internet

// For some odd reason, TypeScript wasn't able to locate *.vue files such as '@/App.vue' in the index.ts file
// So I found this on Stackoverflow https://stackoverflow.com/questions/42002394/importing-vue-components-in-typescript-file
// and it works for now

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue