KM Posts - Answer Overflow

•Created by KM on 4/26/2024 in #❓・help

@nuxt/eslint & ESLint Flat File Config

Hey, I'm really struggling to work out the new flat file format for ES Lint. Ideally I want to use Prettier for formatting, Vue-eslint-parser for handling Vue. Also Tailwind CSS linting with the es lint plugin and type checking for typescript. Here's my eslint.config.mjs file, anything commented out just started breaking -

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
// import vueESLintParser from 'vue-eslint-parser'
// @ts-ignore
import eslintConfigPrettier from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import eslintPluginTailwindCSS from 'eslint-plugin-tailwindcss'

export default withNuxt(
  {
    // languageOptions.parser: {
    // parser: vueESLintParser,
    // }
    // extends: [
    //   'eslint:recommended',
    //   '@nuxt/eslint-config',
    //   'plugin:prettier/recommended',
    // ],

    plugins: {
      prettier: prettierPlugin,
      tailwindCSS: eslintPluginTailwindCSS,
    },
    rules: {
      ...prettierPlugin.configs.recommended.rules,
      ...eslintConfigPrettier.rules,
      ...eslintPluginPrettierRecommended.rules,
      // ...eslintPluginTailwindCSS.rules,
      // semi: false,
      // quotes: [2, 'single', { avoidEscape: true }],
    },
  },

  {
    ignores: [
      'v1/*',
      'v1/*/**',
      '.nuxt/*',
      '.nuxt/*/**',
      '.vscode/*',
      '.vscode/*/**',
      '.output/*',
      '.ouput/*/**',
      'node_modules',
    ],
  }
)

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
// import vueESLintParser from 'vue-eslint-parser'
// @ts-ignore
import eslintConfigPrettier from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import eslintPluginTailwindCSS from 'eslint-plugin-tailwindcss'

export default withNuxt(
  {
    // languageOptions.parser: {
    // parser: vueESLintParser,
    // }
    // extends: [
    //   'eslint:recommended',
    //   '@nuxt/eslint-config',
    //   'plugin:prettier/recommended',
    // ],

    plugins: {
      prettier: prettierPlugin,
      tailwindCSS: eslintPluginTailwindCSS,
    },
    rules: {
      ...prettierPlugin.configs.recommended.rules,
      ...eslintConfigPrettier.rules,
      ...eslintPluginPrettierRecommended.rules,
      // ...eslintPluginTailwindCSS.rules,
      // semi: false,
      // quotes: [2, 'single', { avoidEscape: true }],
    },
  },

  {
    ignores: [
      'v1/*',
      'v1/*/**',
      '.nuxt/*',
      '.nuxt/*/**',
      '.vscode/*',
      '.vscode/*/**',
      '.output/*',
      '.ouput/*/**',
      'node_modules',
    ],
  }
)

How do I actually configure this, I'm very confused so to what the proper format is now.

20 replies

NNuxt

•Created by KM on 3/13/2024 in #❓・help

Nuxt 3 Loading Component?

Hey guys, I've just noticed that Nuxt 3 doesn't have the same loading component as V2. Is there a way I can use my old loading component with Nuxt 3? What's the best workaround for this?

<template>
  <transition name="fade">
    <div v-if="loading" class="loading-page">
      <p id="loadingTitle">Loading...</p>
      <p class="number text-9xl font-righteous"></p>
    </div>
  </transition>
</template>

<script>
export default {
  data: () => ({
    loading: true,
  }),

  beforeMount() {
    const numb = document.querySelector('.number')
    let counter = 0
    setInterval(() => {
      if (counter === 100) {
        clearInterval()
      } else {
        counter += 1
        numb.textContent = counter + '%'
      }
    }, 10)
  },

  methods: {
    start() {
      this.loading = true
    },
    finish() {
      this.loading = false
    },
  },
}
</script>

<style scoped>
#loadingTitle {
  opacity: 0;
  animation-name: fadein;
  animation-duration: 0.25s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}

.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  z-index: 999;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>

<template>
  <transition name="fade">
    <div v-if="loading" class="loading-page">
      <p id="loadingTitle">Loading...</p>
      <p class="number text-9xl font-righteous"></p>
    </div>
  </transition>
</template>

<script>
export default {
  data: () => ({
    loading: true,
  }),

  beforeMount() {
    const numb = document.querySelector('.number')
    let counter = 0
    setInterval(() => {
      if (counter === 100) {
        clearInterval()
      } else {
        counter += 1
        numb.textContent = counter + '%'
      }
    }, 10)
  },

  methods: {
    start() {
      this.loading = true
    },
    finish() {
      this.loading = false
    },
  },
}
</script>

<style scoped>
#loadingTitle {
  opacity: 0;
  animation-name: fadein;
  animation-duration: 0.25s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}

.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  z-index: 999;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>

27 replies

Gaming

Programming