Как создать глобальный компонент в Nuxt.js 3?

У меня есть проект nuxt 3 с несколькими макетами. Я хотел бы создать глобальный компонент, который запускается один раз, когда клиент впервые запрашивает мой сайт. И я не хочу, чтобы он размонтировался, когда пользователь меняет макеты. Возможно ли это с Nuxt 3?

Вот глобальный компонент:

<template>
  <component is = "script" src = "https://js.pusher.com/8.0.0/pusher.min.js" />
</template>

<script setup>
onMounted(() => {
  console.info('mounted here')
  var pusher = new Pusher('APP_ID', {
  cluster: 'CLUSTER_ID',
  })

  var channel = pusher.subscribe('notifications-general')

  channel.bind('PATH, function (data) {
    console.info('here in execute')
    alert(data.notification.body_en)
  })
})
</script>

Экземпляр компонента, по крайней мере теоретически, привязан к конкретному узлу DOM. Он размонтируется, когда узел DOM удаляется логикой контекста. Похоже, что вам действительно нужно хранилище, которое позволяет сохранять данные в приложении без привязки к какому-либо узлу DOM. При этом само приложение является хорошим местом для хранения всего, что вы хотите, на нескольких «страницах». И он никогда не "демонтируется".

— 25.05.2023 15:50

Если вам нужно запускать только логику Javascript, вы можете использовать клиентское промежуточное ПО.

— 26.05.2023 06:40

@tao Спасибо. Я даже забыл, что у меня есть app.vue

— 27.05.2023 00:36

Полагаю, промежуточное ПО @nur_riyad запускается при каждом изменении маршрута. Это не сработает для меня.

— 27.05.2023 00:39

Вы можете использовать промежуточное ПО именованных маршрутов, которое можно запускать только для одной страницы или маршрутов.

— 27.05.2023 07:32

vue.js nuxt.js vuejs3 nuxtjs3 nuxt3

25.05.2023 15:24

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте поместить эту логику в src/app.vue, теоретически это никогда не должно размонтироваться, пока сам браузер не будет закрыт? Возможно, это сработает?

<template>

  <component is = "script" src = "https://js.pusher.com/8.0.0/pusher.min.js" />

  <nuxt-layout>
    <nuxt-page />
  </nuxt-layout>

</template>

<script setup>
onMounted(() => {
  console.info('mounted here')
  var pusher = new Pusher('APP_ID', {
  cluster: 'CLUSTER_ID',
  })

  var channel = pusher.subscribe('notifications-general')

  channel.bind('PATH, function (data) {
    console.info('here in execute')
    alert(data.notification.body_en)
  })
})
</script>

Спасибо. TBH Я даже забыл, что у меня есть app.vue.

— 27.05.2023 00:34

25.05.2023 16:27