chore: lint with @nuxt/eslint-config

Author: johannschopplich

.eslintrc

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: ['@nuxt/eslint-config'],
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  }
+}

.eslintrc.cjs

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-remote-fn",
   "version": "0.1.21",
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].2",
   "description": "Remote Functions. Instead of Event Handlers.",
   "keywords": [
     "nuxt",
@@ -51,22 +51,22 @@
     "dedent": "^0.7.0",
     "es-module-lexer": "^1.1.0",
     "fast-glob": "^3.2.12",
-    "h3": "^1.0.1",
+    "h3": "^1.0.2",
     "ofetch": "^1.0.0",
     "pathe": "^1.0.0",
     "unctx": "^2.1.1"
   },
   "devDependencies": {
+    "@nuxt/eslint-config": "^0.1.1",
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/schema": "^3.0.0",
-    "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@prisma/client": "^4.7.1",
     "@types/dedent": "^0.7.0",
     "bumpp": "^8.2.1",
     "eslint": "^8.29.0",
-    "esno": "^0.16.3",
     "nuxt": "^3.0.0",
     "prisma": "^4.7.1",
-    "taze": "^0.8.4"
+    "taze": "^0.8.4",
+    "tsx": "^3.12.1"
   }
 }

package.json

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from '#imports'
-import { addTodo } from '@/lib/todo.server'
+import { addTodo } from '~/lib/todo.server'
 
 const title = ref('')
 const content = ref('')
@@ -24,8 +24,15 @@ async function handleSubmit () {
   <div>
     <h1>Add todo</h1>
     <form @submit.prevent="handleSubmit">
-      <input v-model="title" placeholder="Title" type="text"> <br>
-      <textarea v-model="content" placeholder="Content" /> <br>
+      <input
+        v-model="title"
+        placeholder="Title"
+        type="text"
+      > <br>
+      <textarea
+        v-model="content"
+        placeholder="Content"
+      /> <br>
       <button :disabled="submitting">
         Submit
       </button>

playground/components/Form.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAsyncData } from '#app'
-import { deleteTodo, toggleTodo, getTodos } from '~~/lib/todo.server'
+import { deleteTodo, toggleTodo, getTodos } from '~/lib/todo.server'
 
 const { data: todos, refresh } = await useAsyncData('todos', () => getTodos())
 
@@ -18,16 +18,29 @@ async function handleDelete (id: number) {
 <template>
   <div>
     <ul>
-      <li v-for="todo in todos" :key="todo.id">
+      <li
+        v-for="todo in todos"
+        :key="todo.id"
+      >
         <h2>
           <span>{{ todo.title }}</span>
-          <input type="checkbox" :checked="todo.completed" @change="handleChange(todo.id)">
+          <input
+            type="checkbox"
+            :checked="todo.completed"
+            @change="handleChange(todo.id)"
+          >
           <button @click="handleDelete(todo.id)">
             remove
           </button>
         </h2>
         <p>
-          <span :style="{textDecoration: todo.completed ? 'line-through' : undefined}">{{ todo.content }}</span>
+          <span
+            :style="{
+              textDecoration: todo.completed ? 'line-through' : undefined
+            }"
+          >
+            {{ todo.content }}
+          </span>
           {{ todo.completed ? ' ✅ done' : '' }}
         </p>
       </li>