VueCraft NPM

Composables для Vue ​

Импорт из os-detect/vue. Требуется Vue 3+.

ts
import { useOS, useIsWindows11 } from 'os-detect/vue'

useOS() ​

  • Принимает: ничего
  • Возвращает: Readonly<Ref<OS>> — вычисляется один раз через readonly(ref(getOS()))

Возвращает readonly Ref с текущей строкой ОС.

vue
<script setup lang="ts">
import { useOS } from 'os-detect/vue'

const os = useOS() // Readonly<Ref<OS>>
</script>

<template>
  <p>Running on {{ os }}</p>
</template>

useIsWindows11() ​

  • Принимает: ничего
  • Возвращает: Readonly<Ref<boolean | null>> — начинается со значения null, разрешается внутри onMounted

Запускает асинхронную проверку detectIsWindows11() внутри onMounted и обновляет ref, когда она завершится.

vue
<script setup lang="ts">
import { useOS, useIsWindows11 } from 'os-detect/vue'

const os = useOS() // Readonly<Ref<OS>>
const isWin11 = useIsWindows11() // Readonly<Ref<boolean | null>>
</script>

<template>
  <p v-if="isWin11 === null">Определяем версию Windows…</p>
  <p v-else-if="isWin11">Windows 11</p>
  <p v-else-if="os === 'windows'">Windows 10 или старше</p>
  <p v-else>OS: {{ os }}</p>
</template>

SSR (Nuxt) ​

useOS() вызывает getOS() нетерпеливо внутри ref(getOS()), прямо в теле composable — это выполняется во время setup(), который при SSR (Nuxt) реально выполняется и на сервере тоже, а не только на клиенте. Это значит, что useOS() несёт тот же риск несовпадения при гидратации, что и прямой вызов getOS(): если ОС сервера отличается от клиентской, значение, зашитое в серверный HTML, не совпадёт с тем, что клиент вычислит заново при гидратации.

У useIsWindows11() этой проблемы нет — она осознанно начинается со значения null и разрешается только внутри onMounted, который никогда не выполняется при SSR.

Если контент, зависящий от ОС, должен точно совпадать на клиенте, примените тот же паттерн ref + onMounted вручную вместо useOS():

vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getOS } from 'os-detect'
import type { OS } from 'os-detect'

const os = ref<OS | null>(null)
onMounted(() => {
  os.value = getOS()
})
</script>

<template>
  <p v-if="os">OS: {{ os }}</p>
</template>