refactor: use consistent block order in Vue SFCs

eslint.config.js

@@ -1,16 +1,27 @@
-/**
+/*!
  * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: CC0-1.0
  */
 
 import { recommended } from '@nextcloud/eslint-config'
+import { defineConfig } from 'eslint/config'
 
-export default [
+export default defineConfig([
 	...recommended,
+
+	{
+		files: ['**/*.vue'],
+		rules: {
+			'vue/block-order': ['error', {
+				order: ['script', 'template', 'style'],
+			}],
+		},
+	},
+
 	{
 		ignores: [
 			'js/**',
 			'l10n/**',
 		],
 	},
-]
+])

js/firstrunwizard-about.mjs

@@ -1,3 +1,3 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('firstrunwizard', '', 'js/main-m38lbWjk.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/NcModal-DHryP_87-D_og8Giy.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/index-EKlYWjzp.chunk.mjs')])))=>i.map(i=>d[i]);
-import{_ as i}from"./modulepreload-polyfill-CBWYtosv.chunk.mjs";import{s as u}from"./index-EKlYWjzp.chunk.mjs";document.addEventListener("DOMContentLoaded",function(){const e=()=>document.querySelector("#firstrunwizard_about"),t=()=>{e().addEventListener("click",async function(o){o.stopPropagation(),o.preventDefault();const{open:n}=await i(async()=>{const{open:a}=await import("./main-m38lbWjk.chunk.mjs");return{open:a}},__vite__mapDeps([0,1,2]),import.meta.url),r=document.querySelector('[aria-controls="header-menu-user-menu"]');n(r??void 0),window.OC.hideMenus(()=>!1)})};e()?t():u("core:user-menu:mounted",t)});
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('firstrunwizard', '', 'js/main-CGfmK_lw.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/NcModal-DHryP_87-D_og8Giy.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/index-EKlYWjzp.chunk.mjs')])))=>i.map(i=>d[i]);
+import{_ as i}from"./modulepreload-polyfill-CBWYtosv.chunk.mjs";import{s as u}from"./index-EKlYWjzp.chunk.mjs";document.addEventListener("DOMContentLoaded",function(){const e=()=>document.querySelector("#firstrunwizard_about"),t=()=>{e().addEventListener("click",async function(o){o.stopPropagation(),o.preventDefault();const{open:n}=await i(async()=>{const{open:a}=await import("./main-CGfmK_lw.chunk.mjs");return{open:a}},__vite__mapDeps([0,1,2]),import.meta.url),r=document.querySelector('[aria-controls="header-menu-user-menu"]');n(r??void 0),window.OC.hideMenus(()=>!1)})};e()?t():u("core:user-menu:mounted",t)});
 //# sourceMappingURL=firstrunwizard-about.mjs.map

js/firstrunwizard-activate.mjs

@@ -1,3 +1,3 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('firstrunwizard', '', 'js/main-m38lbWjk.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/NcModal-DHryP_87-D_og8Giy.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/index-EKlYWjzp.chunk.mjs')])))=>i.map(i=>d[i]);
-import{_ as t}from"./modulepreload-polyfill-CBWYtosv.chunk.mjs";document.addEventListener("DOMContentLoaded",async function(){(await t(()=>import("./main-m38lbWjk.chunk.mjs"),__vite__mapDeps([0,1,2]),import.meta.url)).open()});
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('firstrunwizard', '', 'js/main-CGfmK_lw.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/NcModal-DHryP_87-D_og8Giy.chunk.mjs'),window.OC.filePath('firstrunwizard', '', 'js/index-EKlYWjzp.chunk.mjs')])))=>i.map(i=>d[i]);
+import{_ as t}from"./modulepreload-polyfill-CBWYtosv.chunk.mjs";document.addEventListener("DOMContentLoaded",async function(){(await t(()=>import("./main-CGfmK_lw.chunk.mjs"),__vite__mapDeps([0,1,2]),import.meta.url)).open()});
 //# sourceMappingURL=firstrunwizard-activate.mjs.map

src/components/AppStoreBadge.vue

@@ -3,15 +3,6 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<template>
-	<a
-		:class="$style.badge"
-		:aria-label="ariaLabel"
-		target="_blank"
-		rel="noreferrer"
-		:href="href" />
-</template>
-
 <script setup lang="ts">
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
@@ -61,6 +52,15 @@ const ariaLabel = computed(() => {
 })
 </script>
 
+<template>
+	<a
+		:class="$style.badge"
+		:aria-label="ariaLabel"
+		target="_blank"
+		rel="noreferrer"
+		:href="href" />
+</template>
+
 <style module lang="scss">
 .badge {
 	height: 74px;

src/components/InfoCard.vue

@@ -2,6 +2,18 @@
   - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+	title: string
+	subtitle?: string
+	href?: string
+}>()
+
+const isLink = computed(() => !!props.href)
+</script>
+
 <template>
 	<component
 		:is="isLink ? 'a' : 'div'"
@@ -21,18 +33,6 @@
 	</component>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-	title: string
-	subtitle?: string
-	href?: string
-}>()
-
-const isLink = computed(() => !!props.href)
-</script>
-
 <style module lang="scss">
 .card {
 	display: flex;

src/components/SlideShow.vue

@@ -3,74 +3,6 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<template>
-	<div :class="$style.wrapper">
-		<!-- The "wave" background for the logo on the first page-->
-		<Transition
-			:enterClass="waveTransitionClasses.enter"
-			:enterActiveClass="waveTransitionClasses.active"
-			:leaveActiveClass="waveTransitionClasses.active"
-			:leaveToClass="waveTransitionClasses.leave">
-			<div v-if="isFirstPage" :class="$style.background_circle" />
-		</Transition>
-
-		<!-- Bar on the modal top -->
-		<div :class="$style.background_bar" />
-
-		<!-- Back button on mobile if not first page -->
-		<NcButton
-			v-if="!isFirstPage"
-			:aria-label="t('firstrunwizard', 'Go to previous page')"
-			:class="$style.button_back"
-			variant="tertiary-no-background"
-			@click="currentIndex -= 1">
-			<template #icon>
-				<NcIconSvgWrapper :path="mdiArrowLeft" />
-			</template>
-		</NcButton>
-
-		<!-- Custom close button to fix color contrast on first page -->
-		<NcButton
-			:aria-label="t('firstrunwizard', 'Close')"
-			:class="$style.button_close"
-			:variant="isFirstPage ? 'tertiary-on-primary' : 'tertiary-no-background'"
-			@click="$emit('close')">
-			<template #icon>
-				<NcIconSvgWrapper :path="mdiClose" />
-			</template>
-		</NcButton>
-
-		<!-- The first page has the logo within a "wave" style background -->
-		<div v-if="isFirstPage" :class="$style.logo" />
-
-		<!-- The page that is currently show wrapped in a slide transition -->
-		<Transition
-			mode="out-in"
-			:enterClass="transitionClasses.enter"
-			:enterActiveClass="transitionClasses.active"
-			:leaveActiveClass="transitionClasses.active"
-			:leaveToClass="transitionClasses.leave">
-			<component :is="currentPage.component" :scrollerClasses="isFirstPage ? $style.first_page_scroller : ''" />
-		</Transition>
-
-		<!-- Next button(s) -->
-		<div :class="$style.button_wrapper">
-			<NcButton
-				v-for="button, index of currentPage.buttons"
-				:key="button.to"
-				alignment="center-reverse"
-				:variant="index === currentPage.buttons.length - 1 ? 'primary' : 'secondary'"
-				:wide="index === currentPage.buttons.length - 1"
-				@click="goToPage(button.to)">
-				<template v-if="!isLastPage" #icon>
-					<NcIconSvgWrapper :path="mdiArrowRight" />
-				</template>
-				{{ button.label }}
-			</NcButton>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { IPage } from '../pages.ts'
 
@@ -156,6 +88,74 @@ function goToPage(pageId: string) {
 }
 </script>
 
+<template>
+	<div :class="$style.wrapper">
+		<!-- The "wave" background for the logo on the first page-->
+		<Transition
+			:enterClass="waveTransitionClasses.enter"
+			:enterActiveClass="waveTransitionClasses.active"
+			:leaveActiveClass="waveTransitionClasses.active"
+			:leaveToClass="waveTransitionClasses.leave">
+			<div v-if="isFirstPage" :class="$style.background_circle" />
+		</Transition>
+
+		<!-- Bar on the modal top -->
+		<div :class="$style.background_bar" />
+
+		<!-- Back button on mobile if not first page -->
+		<NcButton
+			v-if="!isFirstPage"
+			:aria-label="t('firstrunwizard', 'Go to previous page')"
+			:class="$style.button_back"
+			variant="tertiary-no-background"
+			@click="currentIndex -= 1">
+			<template #icon>
+				<NcIconSvgWrapper :path="mdiArrowLeft" />
+			</template>
+		</NcButton>
+
+		<!-- Custom close button to fix color contrast on first page -->
+		<NcButton
+			:aria-label="t('firstrunwizard', 'Close')"
+			:class="$style.button_close"
+			:variant="isFirstPage ? 'tertiary-on-primary' : 'tertiary-no-background'"
+			@click="$emit('close')">
+			<template #icon>
+				<NcIconSvgWrapper :path="mdiClose" />
+			</template>
+		</NcButton>
+
+		<!-- The first page has the logo within a "wave" style background -->
+		<div v-if="isFirstPage" :class="$style.logo" />
+
+		<!-- The page that is currently show wrapped in a slide transition -->
+		<Transition
+			mode="out-in"
+			:enterClass="transitionClasses.enter"
+			:enterActiveClass="transitionClasses.active"
+			:leaveActiveClass="transitionClasses.active"
+			:leaveToClass="transitionClasses.leave">
+			<component :is="currentPage.component" :scrollerClasses="isFirstPage ? $style.first_page_scroller : ''" />
+		</Transition>
+
+		<!-- Next button(s) -->
+		<div :class="$style.button_wrapper">
+			<NcButton
+				v-for="button, index of currentPage.buttons"
+				:key="button.to"
+				alignment="center-reverse"
+				:variant="index === currentPage.buttons.length - 1 ? 'primary' : 'secondary'"
+				:wide="index === currentPage.buttons.length - 1"
+				@click="goToPage(button.to)">
+				<template v-if="!isLastPage" #icon>
+					<NcIconSvgWrapper :path="mdiArrowRight" />
+				</template>
+				{{ button.label }}
+			</NcButton>
+		</div>
+	</div>
+</template>
+
 <style module lang="scss">
 .wrapper {
 	position: relative;

src/components/WizardPage.vue

@@ -3,6 +3,14 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+defineProps<{
+	title: string
+	subtitle?: string
+	scrollerClasses?: string | string[] | Record<string, boolean>
+}>()
+</script>
+
 <template>
 	<div :class="$style.wrapper">
 		<div :class="[$style.scroller, scrollerClasses]">
@@ -19,14 +27,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-defineProps<{
-	title: string
-	subtitle?: string
-	scrollerClasses?: string | string[] | Record<string, boolean>
-}>()
-</script>
-
 <style module>
 .wrapper {
 	display: flex;

src/components/pages/AboutNextcloud.vue

@@ -3,6 +3,12 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import { translate as t } from '@nextcloud/l10n'
+import InfoCard from '../InfoCard.vue'
+import WizardPage from '../WizardPage.vue'
+</script>
+
 <template>
 	<WizardPage :title="t('firstrunwizard', 'More about Nextcloud')">
 		<InfoCard
@@ -23,9 +29,3 @@
 			:subtitle="t('firstrunwizard', 'Get Nextcloud Enterprise for mission critical environments where advanced security and compliance are important.')" />
 	</WizardPage>
 </template>
-
-<script setup lang="ts">
-import { translate as t } from '@nextcloud/l10n'
-import InfoCard from '../InfoCard.vue'
-import WizardPage from '../WizardPage.vue'
-</script>

src/components/pages/DeviceIntegration.vue

@@ -3,6 +3,18 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import { loadState } from '@nextcloud/initial-state'
+import { translate as t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+import AppStoreBadge from '../AppStoreBadge.vue'
+import InfoCard from '../InfoCard.vue'
+import WizardPage from '../WizardPage.vue'
+
+const desktop = loadState<string>('firstrunwizard', 'desktop')
+const syncClientsUrl = generateUrl('settings/user/sync-clients')
+</script>
+
 <template>
 	<WizardPage
 		:title="t('firstrunwizard', 'Seamless integration with your devices.')"
@@ -19,15 +31,3 @@
 			:subtitle="t('firstrunwizard', 'Connect your calendar and contacts with your devices.')" />
 	</WizardPage>
 </template>
-
-<script setup lang="ts">
-import { loadState } from '@nextcloud/initial-state'
-import { translate as t } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
-import AppStoreBadge from '../AppStoreBadge.vue'
-import InfoCard from '../InfoCard.vue'
-import WizardPage from '../WizardPage.vue'
-
-const desktop = loadState<string>('firstrunwizard', 'desktop')
-const syncClientsUrl = generateUrl('settings/user/sync-clients')
-</script>