refactor: move script over template

This commit is contained in:
Anthony Fu 2021-01-22 18:32:27 +08:00
parent 4c51428587
commit a975fd7c21
5 changed files with 52 additions and 55 deletions

View File

@ -1,3 +1,16 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { isDark } from '/~/logics'
const { t, availableLocales, locale } = useI18n()
const toggleLocales = () => {
// change to some real logic
const locales = availableLocales
locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
}
</script>
<template>
<nav class="text-xl mt-6">
<router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
@ -22,18 +35,3 @@
</a>
</nav>
</template>
<script setup lang='ts'>
import { useI18n } from 'vue-i18n'
import { isDark } from '/~/logics'
const i18n = useI18n()
const toggleLocales = () => {
// change to some real logic
const locales = i18n.availableLocales
i18n.locale.value = locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length]
}
const t = i18n.t
</script>

View File

@ -1,11 +1,11 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<template>
<div>
{{ t('not-found') }}
</div>
</template>
<script setup lang='ts'>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

View File

@ -1,3 +1,18 @@
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { defineProps } from 'vue'
const props = defineProps({
name: {
type: String,
require: true,
},
})
const router = useRouter()
const { t } = useI18n()
</script>
<template>
<div>
@ -5,7 +20,7 @@
<carbon-pedestrian class="inline-block" />
</p>
<p>
{{ t('intro.hi', {name}) }}
{{ t('intro.hi', { name: props.name }) }}
</p>
<p class="text-sm opacity-50">
<em>{{ t('intro.dynamic-route') }}</em>
@ -21,19 +36,3 @@
</div>
</div>
</template>
<script setup lang='ts'>
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { defineProps } from 'vue'
const props = defineProps({
name: {
type: String,
require: true,
},
})
const router = useRouter()
const { t } = useI18n()
</script>

View File

@ -1,3 +1,19 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
const name = ref('')
const router = useRouter()
const go = () => {
if (name.value)
router.push(`/hi/${name.value}`)
}
const { t } = useI18n()
</script>
<template>
<div>
<p class="text-4xl">
@ -37,19 +53,3 @@
</div>
</div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
const name = ref('')
const router = useRouter()
const go = () => {
if (name.value)
router.push(`/hi/${name.value}`)
}
const { t } = useI18n()
</script>