fix: 🐛 Corrige le bug dans nuxt

Pour l’instant, impossible d’utiliser le JS du DSFR dans nuxt

Author: laruiss

rollup.config.js

@@ -32,12 +32,21 @@ const baseOutput = {
     'vue-router': 'vue-router',
     'oh-vue-icons/dist/v3/icon.es': 'VIcon',
     'oh-vue-icons/icons': 'icons',
+    'focus-trap': 'focus-trap',
+    'focus-trap-vue': 'focus-trap-vue',
   },
 }
 
 const baseConfig = {
   input: 'src/index.js',
-  external: ['vue', 'vue-router', 'oh-vue-icons/dist/v3/icon.es', 'oh-vue-icons/icons'],
+  external: [
+    'vue',
+    'vue-router',
+    'oh-vue-icons/dist/v3/icon.es',
+    'oh-vue-icons/icons',
+    'focus-trap',
+    'focus-trap-vue',
+  ],
   output: {
     globals: baseOutput.globals,
   },

src/components/DsfrAlert/DsfrAlert.vue

@@ -5,6 +5,7 @@ import { getRandomId } from '../../utils/random-utils.js'
 
 export default defineComponent({
   name: 'DsfrAlert',
+
   props: {
     id: {
       type: String,
@@ -99,7 +100,6 @@ export default defineComponent({
 </template>
 
 <style src="@gouvfr/dsfr/dist/component/alert/alert.main.css" />
-<!-- <style src="../../../node_modules/@gouvfr/dsfr/dist/component/alert/alert.main.css" /> -->
 
 <style scoped>
 .fr-alert,

src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue

@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue'
 
-// TODO: Pourquoi pas d’animation ?
-import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.module.js'
+// Ne fonctionne pas dans Nuxt
+// import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.module.js'
 
 import { getRandomId } from '../../utils/random-utils.js'
 

src/components/DsfrButton/DsfrButton.vue

@@ -1,7 +1,7 @@
 <script>
 import { defineComponent } from 'vue'
 
-import '@gouvfr/dsfr/dist/component/button/button.module.js'
+// import '@gouvfr/dsfr/dist/component/button/button.module.js'
 
 export default defineComponent({
   name: 'DsfrButton',

src/components/DsfrFollow/DsfrNewsLetter.vue

@@ -21,10 +21,6 @@ export default defineComponent({
       type: String,
       default: '',
     },
-    options: {
-      type: String,
-      default: '',
-    },
     labelEmail: {
       type: String,
       default: 'Votre adresse électronique (ex. : [email protected])',

src/components/DsfrHeader/DsfrHeader.vue

@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue'
 
 // Pose problème dans les tests, et risque fort de poser problème dans Nuxt
-import '@gouvfr/dsfr/dist/component/header/header.module.js'
+// import '@gouvfr/dsfr/dist/component/header/header.module.js'
 
 import DsfrLogo from '../DsfrLogo/DsfrLogo.vue'
 import DsfrSearchBar from '../DsfrSearchBar/DsfrSearchBar.vue'

src/components/DsfrModal/DsfrModal.vue

@@ -3,7 +3,7 @@ import { defineComponent } from 'vue'
 
 import { FocusTrap } from 'focus-trap-vue'
 
-import '@gouvfr/dsfr/dist/component/modal/modal.module.js'
+// import '@gouvfr/dsfr/dist/component/modal/modal.module.js'
 
 import DsfrButtonGroup from '../DsfrButton/DsfrButtonGroup.vue'
 

src/components/DsfrNavigation/DsfrNavigation.vue

@@ -1,7 +1,7 @@
 <script>
 import { defineComponent } from 'vue'
 
-import '@gouvfr/dsfr/dist/component/navigation/navigation.module.js'
+// import '@gouvfr/dsfr/dist/component/navigation/navigation.module.js'
 
 import { getRandomId } from '../../utils/random-utils.js'
 

src/components/DsfrNavigation/DsfrNavigationMenu.vue

@@ -1,7 +1,7 @@
 <script>
 import { defineComponent } from 'vue'
 
-import '@gouvfr/dsfr/dist/component/navigation/navigation.module.js'
+// import '@gouvfr/dsfr/dist/component/navigation/navigation.module.js'
 
 import { getRandomId } from '../../utils/random-utils.js'
 import DsfrNavigationMenuItem from './DsfrNavigationMenuItem.vue'

src/components/DsfrSideMenu/DsfrSideMenu.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { getRandomId } from '../../utils/random-utils.js'
 
-import '@gouvfr/dsfr/dist/component/sidemenu/sidemenu.module.js'
+// import '@gouvfr/dsfr/dist/component/sidemenu/sidemenu.module.js'
 
 import DsfrSideMenuList from './DsfrSideMenuList.vue'