小编kis*_*ssu的帖子

我想访问上下文变量以使用该isMobile标志根据结果选择不同的端点。我可以从组件中传递它dispatch，但我知道应该有一种方法可以做到这一点。

export const actions = {
...
  signUpGoogle({ commit }) {
    fireauth.useDeviceLanguage()

    if (context.isMobile) {
      fireauth.signInWithPopup(GoogleProvider).then ...

    } else {
      fireauth.signInWithRedirect(GoogleProvider)
    }

}

我在这里看到它可以在服务器初始化上获取，但我真的不想依赖它，因为缓存会把事情搞砸

https://nuxtjs.org/guide/vuex-store/#the-nuxtserverinit-action

谢谢您的帮助

Nuxt 2.15.6；我想通过动态切换根布局中的菜单组件来切换菜单组件的布局。

default.vue

<template>
  <component :is="navLayout"></component>
  <Nuxt :navLayout="navLayout = $event" />
</template>

data() {
  return {
    navLayout: "default"
  };
},

在我的页面的“子”组件中，例如。login.vue (/login) I$emit一个事件；

...
import nav2 from "@/layouts/nav2";
...
created() {
  this.$emit("navLayout", nav2);
},

现在看来该<Nuxt>组件无法捕获该事件。我也尝试过调用一个<Nuxt @navLayout="test()" />方法。

我怎样才能避免this.$root.$emit(...);在我login.vue和

this.$root.$on("navLayout", navLayout => {
  this.navLayout = navLayout;
});

在default.vue？

我正在使用这个谷歌字体font-family: 'Saira Semi Condensed', sans-serif;

链接： https: //fonts.google.com/specimen/Saira+Semi+Condensed

我正在从事 NuxtJS 项目。我必须在两个不同的组件中使用这种字体，但具有不同的字体粗细。我已经导入了所有的谷歌字体链接Layout.vue。

对于组件 A 来说，font-weight是600& 对于组件 B 来说，font-weight是800。所以我认为在相应的组件中给出不同的字体粗细会起作用。但它不起作用。仅应用了基本字体，即 Saira Semi Condensed, sans-serif;，但未反映字体粗细值。为了解决这个问题，我需要导入两个具有相同字体但不同字体粗细的谷歌字体链接，这Layout.vue使得它变得多余。

对于字体粗细：600

@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap%27);

对于字体粗细：800

@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap%27);

我认为我导入相同字体的两个链接的方式看起来不太好。你们能帮我解决这个问题吗？提前谢谢您。

代码：

布局.vue

<template>
  <div>
    <Nuxt />
  </div>
</template>

<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: …

我正在尝试在 Nuxt JS 框架中启动一个新项目

npx create-nuxt-app project-name

完成安装后我发现有些目录丢失了。缺少的目录有：布局、中间件、插件和资产。一开始我以为自己做错了，然后又试了第二次、第三次，结果都是一样。我搜索了他们的官方文档和 GitHub 问题关于这个问题，但我没有找到任何东西。

• npm ：“2012 年 14 月 6 日”
• nuxt：“^2.15.3”

我不能在这里使用 window.location 因为它是 SSR 应用程序。useRouter、useRoute 和 useNuxtApp 也没有域名。nuxtApp.ssrContext 未定义。

export default defineNuxtRouteMiddleware((to: any, from: any) => {
  console.log("GET HOST HERE")
})

我想使用 Nuxt 3 组件创建一个 npm 模块。为此，我按以下方式定义了“nuxt.js”文件。

import { join } from 'path'
import { defineNuxtModule} from '@nuxt/kit'

export default defineNuxtModule({
    hooks: {
        'components:dirs'(dirs){
            dirs.push({
                path: join(__dirname, 'components'),
                prefix: 'my-name'
            })
        }
    }
})

当我发布模块然后运行 ​​npm install my-module 时，没有问题。我可以使用 Nuxt 3 组件。但是，由于我还想测试一切是否按预期工作，因此我想使用 npm link 来测试模块而不发布它。

因此，我在两个目录中执行“npm link”，然后执行“npm link 'my-module'”。该模块已正确链接，我可以在我的“node-modules”目录中找到它。但是当运行“npm run dev”时，我收到以下错误：

错误无法启动 nuxt：找不到模块“@nuxt/kit”07:39:52
需要堆栈：
- /path/my-module/nuxt.js

  需要堆栈：
  - /path/my-module/nuxt.js
  在 Function.Module._resolveFilename （内部/modules/cjs/loader.js:902:15）
  在 Function.resolve （内部/模块/cjs/helpers.js:107:19）
  在 _resolve (node_modules/jiti/dist/jiti.js:1:108226)
  在 jiti (node_modules/jiti/dist/jiti.js:1:110413)
  在/path/my-module/nuxt.js:2:12
  在 jiti (node_modules/jiti/dist/jiti.js:1:112282)
  在 requireModule (node_modules/@nuxt/kit/dist/index.mjs:295:26)
  在 normalizeModule (node_modules/@nuxt/kit/dist/index.mjs:448:53) …

我正在学习 Nuxt.js 3，并正在编写一个简单的项目，该项目采用单滚动设计，其中有一个带有锚链接的菜单。单击链接，站点应自动滚动到锚点（如带有 id 的 div）。为了测试这一点，我设置了一个简单的 Nuxt 3 安装npx nuxi init nuxt-app，删除了演示内容并将其替换为：

pages/index.vue

<template>
  <div>
    <div id="home"><p>hello world</p></div>
    <div class="menu">
      <nuxt-link :to="{ path: '/', hash: '#ciao' }">
        link
      </nuxt-link>
    </div>
    <div style="height: 3000px">placeholder</div>
    <div id="ciao"><p>ciao world</p></div>
    <div class="menu">
      <nuxt-link :to="{ path: '/', hash: '#home' }">
        link
      </nuxt-link>
    </div>
    <div style="height: 3000px">placeholder</div>
  </div>
</template>

问题是，它不起作用。点击浏览器中的 url 更改为localhost:3000/#ciao或。localhost:3000/#home但这种观点并没有改变。

我还需要在 nuxt 中设置其他东西才能使锚点导航正常工作吗？

我正在尝试使用 package 来保留新 Nuxt 3 应用程序中变量的状态pinia-plugin-persistedstate。

我已经实施了nuxt 3指南中提供的步骤：

1. 创建了/plugins/persistedstate.ts文件。
2. persist: true在商店文件中添加了选项。

但什么也没发生。每当我刷新页面时，存储值就会丢失。

有人可以帮我理解这里的问题是什么吗？另外，如果有人使用过该软件包，请分享我在实施时可能缺少的步骤。

我在用着@storybook/vue": "^6.5.10"。<style>我的组件由每个 .vue 文件底部的块设置样式。还有一些由 Rails webpacker 编译的全局 CSS (Sass) 文件。

为了重现我的故事中的全局 CSS 文件，我编写了装饰器（下面的示例）来重新创建各种 CSS 上下文。问题是我在一个装饰器中加载的 CSS 正在应用于我的其他组件/故事，我不明白为什么！

我的简化装饰器：

// THESE  STYLES ARE SHOWING UP IN STORIES THAT DO NOT USE THIS DECORATOR!
import '!style-loader!css-loader!sass-loader!../../app/javascript/styles/site.sass';

const sitePackDecorator = (story) => {     

    // other irrelevant stuff
        
    return {
      components: { story },
      template: '<story />'
    }
  }
;

export {sitePackDecorator}

然后在我的故事文件中，我将其应用在组件级别，如下所示：

import MyComponent from '../app/javascript/src/site/components/assets/MyComponent'
import { sitePackDecorator } from './utilities/sitePackDecorator';

export default {
  title: 'My Component',
  component: …

我正在使用带有电容器的 NuxtJS。当我们滚动时，IOS 设备上的顶部状态栏会重叠。我还在"ios": {"contentInset": "always"}capacitor.config.json中添加了。

尽管我还包含了 CSS，但它在顶部创建了额外的空间。

body {
   padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
     env(safe-area-inset-left);
 }