refactor: module structure, Nuxt 4 compatibility

Author: dulnan

CHANGELOG.md

@@ -1,13 +1,13 @@
 # Changelog
 
-
 ## v2.5.5
 
 [compare changes](https://github.com/liip/vuepal/compare/v2.5.4...v2.5.5)
 
 ### 🩹 Fixes
 
-- Typescript issue resolved. ([7ad769b](https://github.com/liip/vuepal/commit/7ad769b))
+- Typescript issue resolved.
+  ([7ad769b](https://github.com/liip/vuepal/commit/7ad769b))
 
 ### ❤️ Contributors
 
@@ -19,7 +19,8 @@
 
 ### 🩹 Fixes
 
-- Remove unwanted styles ([cf99c13](https://github.com/liip/vuepal/commit/cf99c13))
+- Remove unwanted styles
+  ([cf99c13](https://github.com/liip/vuepal/commit/cf99c13))
 
 ### ❤️ Contributors
 
@@ -42,4 +43,3 @@
 - Ayalon <info@ayalon.ch>
 
 ## v2.5.1
-

README.md

@@ -1,7 +1,7 @@
 # VuePal
 
-VuePal provides a bridge between Drupal and Vue. It comes with a set of components and
-composables to make your life easier when working with Drupal.
+VuePal provides a bridge between Drupal and Vue. It comes with a set of
+components and composables to make your life easier when working with Drupal.
 
 ## Frontend Routing
 
@@ -17,10 +17,13 @@ export default defineNuxtConfig({
 })
 ```
 
-With this feature enabled, you can create a static frontend page in Nuxt and still use all the routing features of
-Drupal in your frontend application. You can define your aliases in the frontend page using `definePageMeta`. The module
-will automatically create a Drupal configuration file that can be imported and processed by the
-[Drupal frontend_routing](https://www.drupal.org/project/frontend_routing) module.
+With this feature enabled, you can create a static frontend page in Nuxt and
+still use all the routing features of Drupal in your frontend application. You
+can define your aliases in the frontend page using `definePageMeta`. The module
+will automatically create a Drupal configuration file that can be imported and
+processed by the
+[Drupal frontend_routing](https://www.drupal.org/project/frontend_routing)
+module.
 
 ```ts [pages/static-page/example.vue]
 definePageMeta({
@@ -46,8 +49,9 @@ export default defineNuxtConfig({
 })
 ```
 
-This option enables the `useDrupalRoute()` composable.
-This composable provides the necessary GraphQL fragment and query to fetch the route data and metatags of a Drupal page.
+This option enables the `useDrupalRoute()` composable. This composable provides
+the necessary GraphQL fragment and query to fetch the route data and metatags of
+a Drupal page.
 
 ## Admin Toolbar
 
@@ -61,13 +65,13 @@ export default defineNuxtConfig({
 })
 ```
 
-The admin toolbar component fetches the Drupal administration menu and displays it in your frontend application.
+The admin toolbar component fetches the Drupal administration menu and displays
+it in your frontend application.
 ![toolbar.png](https://github.com/liip/vuepal/blob/main/screenshots/toolbar.png)
 
 ### Usage
 
 ```vue
-
 <template>
   <ClientOnly>
     <div v-if="drupalUser.accessToolbar && !isEditing">
@@ -76,16 +80,15 @@ The admin toolbar component fetches the Drupal administration menu and displays
   </ClientOnly>
 </template>
 
-
 <script setup lang="ts">
-  const route = useRoute()
-  const drupalUser = useDrupalUser()
-  const language = useCurrentLanguage()
-  const isEditing = computed(
-    () =>
-      !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
-      drupalUser.value.accessToolbar,
-  )
+const route = useRoute()
+const drupalUser = useDrupalUser()
+const language = useCurrentLanguage()
+const isEditing = computed(
+  () =>
+    !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
+    drupalUser.value.accessToolbar,
+)
 </script>
 ```
 
@@ -101,11 +104,11 @@ export default defineNuxtConfig({
 })
 ```
 
-The local tasks component fetches the local tasks of a Drupal page and displays them in your frontend application.
+The local tasks component fetches the local tasks of a Drupal page and displays
+them in your frontend application.
 ![localtasks.png](https://github.com/liip/vuepal/blob/main/screenshots/localtasks.png)
 
 ```vue
-
 <template>
   <ClientOnly>
     <div class="flex">

app/vuepal.adapter.ts

@@ -1,13 +1,3 @@
-import { defineVuepalAdapter } from '#vuepal/types'
-import { computed } from '#imports'
+import adapter from './../playground/app/vuepal.adapter'
 
-export default defineVuepalAdapter(() => {
-  return {
-    getAdminMenu() {
-      return Promise.resolve(undefined)
-    },
-    getCurrentLanguage() {
-      return computed(() => 'de')
-    },
-  }
-})
+export default adapter

build.config.ts

@@ -1,6 +1,7 @@
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
+  entries: ['./src/adapter.ts'],
   externals: [
     '#imports',
     'defu',

css/index.css

@@ -1,4 +1,4 @@
-@import './../src/runtime/components/AdminToolbar/Palette/index.css';
+@import './../src/runtime/components/VuepalAdminToolbar/Palette/index.css';
 
 @tailwind base;
 @tailwind components;

eslint.config.mjs

@@ -1,69 +1,26 @@
-// @ts-check
-import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+import withNuxt from './playground/.nuxt/eslint.config.mjs'
+import prettier from 'eslint-plugin-prettier'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 
-// Run `npx @eslint/config-inspector` to inspect the resolved config interactively
-export default createConfigForNuxt({
-  features: {
-    // Rules for module authors
-    tooling: true,
-    // Rules for formatting
-    stylistic: false,
+export default withNuxt({
+  plugins: {
+    prettier,
   },
-  dirs: {
-    src: ['./playground'],
+  rules: {
+    ...eslintConfigPrettier.rules,
+    ...eslintPluginPrettierRecommended.rules,
   },
 })
-  .override('nuxt/vue/rules', {
-    rules: {
-      'vue/no-v-html': 0,
-      'vue/no-v-text-v-html-on-component': 0,
-      'vue/multi-word-component-names': 0,
-      'vue/no-empty-component-block': 'error',
-      'vue/padding-line-between-blocks': 'error',
-      'vue/no-v-for-template-key': 'error',
-      'vue/prefer-true-attribute-shorthand': 'error',
-      'vue/component-api-style': 'error',
-      'vue/block-lang': [
-        'error',
-        {
-          script: {
-            lang: 'ts',
-          },
-        },
-      ],
-      'vue/block-order': [
-        'error',
-        {
-          order: [['script', 'template'], 'style'],
-        },
-      ],
-      'vue/html-self-closing': [
-        'error',
-        {
-          html: {
-            void: 'always',
-          },
-        },
-      ],
-      'vue/no-deprecated-slot-attribute': [
-        'error',
-        {
-          ignore: [],
-        },
-      ],
-    },
-  })
   .override('nuxt/typescript/rules', {
     rules: {
-      '@typescript-eslint/no-explicit-any': 'warn',
       '@typescript-eslint/ban-ts-comment': 'off',
-      '@typescript-eslint/no-empty-object-type': 'off',
     },
   })
-  .override('nuxt/tooling/regexp', {
+  .override('nuxt/vue/rules', {
     rules: {
-      'regexp/no-super-linear-backtracking': 'off',
-      'regexp/optimal-quantifier-concatenation': 'off',
-      'regexp/no-unused-capturing-group': 'off',
+      'vue/multi-word-component-names': 'off',
+      'vue/no-v-text-v-html-on-component': 'off',
+      'vue/no-v-html': 'off',
     },
   })