Repositories

Feed

aintek4

aintek4 posted a new question

docs ā€¢ 8 hours ago

End to end testing doesn't work with spa mode.

"End to End Testing" tutorial does't work When using spa mode because spa mode does't make page content.

The end to end testing using spa mode is hang up and never call test.after when inputs Ctrl-C to terminate.
workaround:

ps -ef | grep node
kill -9 "process_id"

My proposal for test file test/index.test.js:

test.before('Init Nuxt.js', async t => {
  const rootDir = resolve(__dirname, '..')
  let config = {}
  try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {}
  config.mode = 'universal' // my proposal
  config.rootDir = rootDir // project folder
  config.dev = false // production build
  nuxt = new Nuxt(config)
  await new Builder(nuxt).build()
  nuxt.listen(4000, 'localhost')
})

Please consider that.

aintek4

aintek4 posted a new question

docs ā€¢ 8 hours ago

E2E test dose't work with spa mode.

"End to End Testing" tutorial does't work When using spa mode because spa mode dose't make page content.

The end to end testing using spa mode is hang up and never call test.after when inputs Ctrl-C to terminate.
workaround:

ps -ef | grep node
kill -9 "process_id"

My proposal for test file test/index.test.js:

test.before('Init Nuxt.js', async t => {
  const rootDir = resolve(__dirname, '..')
  let config = {}
  try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {}
  config.mode = 'universal' // my proposal
  config.rootDir = rootDir // project folder
  config.dev = false // production build
  nuxt = new Nuxt(config)
  await new Builder(nuxt).build()
  nuxt.listen(4000, 'localhost')
})

Please consider that.

stefandevo

stefandevo posted a new question

nuxt.js ā€¢ 10 hours ago

User env vars to define proxy

Is there a way in nuxt.config.js to set the desired proxy address based upon an environment variable?

npm run dev should set proxy:

'/json': 'http://localhost:5000/'

npm run beta should set proxy:

'/json': 'http://beta.application.com/'

stefandevo

stefandevo posted a new question

proxy-module ā€¢ 11 hours ago

Is there a way to use environment var for the proxy http?

Would it be possible to use a kind of parameter, environment variable in case of different proxy locations depending on run dev

'/json': 'http://localhost:5000/'

or run beta?

'/json': 'http://beta.application.com/'
Jones-S

Jones-S posted a new bug report

nuxt.js ā€¢ 15 hours ago

bug Meta information missing in nested child page after nuxt generate

Version

v1.4.0

Reproduction link

https://5b7c3352e39e7c4f599340c8--sudpol.netlify.com/

Steps to reproduce

Check <head> and see that the og:description (for example) is set correctly when you open the page.
But if you use the facebook debugger you won't see any of this.
Also if you open the source code of this link and reload that (to see what the inital code, after nuxt generation, is you can see that og:description is not populated.

Also I have to mention that we use nested nuxt routes.
So the page ,program, has a nested child page (https://nuxtjs.org/examples/nested-routes/)
the nested route contains an actual post. Within the post I use the the method head () (https://nuxtjs.org/api/pages-head/) to generate the meta information.

Unfortunately when generating the pages this head () function does not seem to be executed leaving the meta info empty.

What is expected ?

I would expect all child routes to execute their head () function when generating the static pages.

What is actually happening?

If I set a head () meta on the page ,program' (parent) only this meta is written into the generated static page.
If I leave it out, there is no actual meta saved in the generated static html.

Additional comments?

I hope my problem is understandable.
If I can elaborate more, please give me a hint, what information is needed.
Also if I misunderstood something, I would be very glad to get some help.

Cheers

J

lucasyvas

lucasyvas posted a new question

nuxt.js ā€¢ 17 hours ago

[edge] How do you get TypeScript working in server middleware?

I have some server middleware that I've given a .ts extension. I've also got nuxt-edge set up to use TypeScript by combining the starter:

https://github.com/nuxt-community/typescript-template/tree/master/template

With this tweak for nuxt-edge:

https://github.com/nuxt-community/typescript-template/issues/48#issuecomment-396437560

It works fine until I add type annotations to the file, at which point it dies:

lucas@watchtower:~/git/gitlab/nuxt-ts$ yarn dev
yarn run v1.9.4
$ nuxt


 INFO  Building project

āœ– fatal file:///home/lucas/git/gitlab/nuxt-ts/src/api/index.ts:4
  const testStr: string = "test";
  ^

  SyntaxError: Invalid or unexpected token
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
Nuxt Fatal Error :(
error Command failed with exit code 1.

How can I get past this? I considered trying to use ts-node, but it doesn't really handle code that's not directly "import"-ed and it is even messier.

If it's not supported, an alternative may be to use nuxt as Express middleware in my own server, but combing nuxt-edge, typescript, and Express in that way is not documented anywhere. The setup can be quite tricky.

hmgibson23

hmgibson23 posted a new question

nuxt-i18n ā€¢ 17 hours ago

Don't use build time environment variables in the config

I'm running a multi-domain i18n setup and am passing in the domain names in nuxt.config.js as recommended in the docs. So, for example:

        locales: [
          {
            code: 'uk',
            iso: 'en-GB',
            file: 'en-GB.js',
            name: 'English',
            domain: process.env.DOMAIN_UK,
          }

The app is built and deployed using Docker and then run on Kubernetes. There are multiple Kubernetes environments and domains mapping to those environments. So theres dev.example.uk and dev.example.fralong withstage.example.ukandprod.example.uk` etc. The problem is that the i18n plugin builds the localisation files with the domain envs set. This means I have to have different Docker builds for each env to make sure the correct domains get set in each envs.

There's obvious problems with this, not least that it's pretty simple to deploy the wrong container to the wrong env. I'm wondering if there's a way to configure these values at runtime, rather than at build time?

Any help appreciated.

negezor

negezor posted a new question

apollo-module ā€¢ 19 hours ago

How to make data from asyncData reactive?

I use the asyncData method to return 404 if there is no data, when writing to the store, the data is not updated. How do I make them reactive?

async asyncData({ app, params, error }) {
    const { defaultClient } = app.apolloProvider;
    const { url } = params;

    const { data } = await defaultClient.query({
        query: fetchUserDashboard,
        variables: { url },
    });

    if (!data.user) {
        return error({
            statusCode: 404,
            message: 'User not found!'
        });
    }

    return data;
}

With a similar smart query, they are updated, but I can not send to user 404.

apollo: {
    user: {
        query: fetchUserDashboard,
        prefetch: true,
        variables() {
            return {
                url: this.url
            };
        }
    }
},

My mutation store.

this.$apollo.mutate({
    mutation: uploadUserAvatar,
    variables: {
        input: {
            userId: this.user.id,
            avatar: target.files[0]
        }
    },
    update: (store, { data: { uploadUserAvatar: { avatar } } }) => {
        store.writeFragment({
            id: `User:${this.user.id}`,
            fragment: gql`
                fragment writeUserAvatar on User {
                    avatar {
                        id

                        sizes {
                            type
                            url
                        }
                    }
                }
            `,
            data: {
                avatar,
                __typename: 'User'
            }
        });
    }
})
Al-Rozhkov

Al-Rozhkov posted a new question

nuxt.js ā€¢ 19 hours ago

How to reuse transition() function?

I have same code for pages transition function on several page components. What should I use to avoid code duplication?

bretanac93

bretanac93 posted a new question

nuxt.js ā€¢ a day ago

Styles not loaded correctly for old browsers

Hello, I have a question which I don't know if classifies as a bug, I'm working on a big project and I modified a little bit my code for more separation of concerns, I don't make use "Single File Components" as they are, for each component I have a folder with 3 files inside, a .scss file, a .vue file and a .js file, as we are several people working on the same project, this structure keep things cleaner.

My question is more focus on retro compatibility as I want to make my website compatible with older browsers such IE 11 and Safari v9, I already did all the JS polyfills part and everything is covered on that side, but still have some issues with the CSS part, I suspect is because of my structure, because instead of defining styles inside <style></style> tags, I'm importing them in my js file, just to show a clearer example on how I'm working right now:

Hello.vue:

<template>
  <h1>Hello World</h1>
</template>
<script src="./Hello.js" />

Hello.js:

import './Hello.scss'
export default {
}

Hello.scss

h1 {
  color: red;
}

of course, this approach works for some css tags and styles, for others doesn't (i.e: background-image).

Please, if any of you are using this approach and know what's happening, let me know.
Thanks a lot for your time.
Bests.

JkmAS

JkmAS posted a new feature request

nuxt.js ā€¢ a day ago

idea Possibility to set rootDir via cli arg or in nuxt config file

What problem does this feature solve?

Nuxt.js (nuxt-edge) takes first arg as the rootDir by default getRootDir = argv => resolve(argv._[0] || '.') (https://nuxtjs.org/api/configuration-rootdir/).

I am using pm2-runtime process manager because of docker and cluster possibilities. But if I use pm2-runtime via npm start: pm2-runtime pm2.config.json in package.json file and I call /node_modules/nuxt/bin/nuxt-start script in pm2 config file, the nuxt will always search in /my-project/pm2.config.json/ folder, because of bad rootDir.

The problem isn't there, if I use just one instance in cluster mode, then I can simply call nuxt start from pm2 config. In case of using more than one instance, you have to call script directly (via /node_modules/nuxt/bin/nuxt-start) in pm2 config to prevent EADDRINUSE error. It solves EADDRINUSE error, but not the rootDir one. Because there is no way to distinguish pm2 config and nuxt rootDir arg.

More info with solution for cluster with just one instance https://github.com/nuxt/nuxt.js/issues/2630

What does the proposed changes look like?

It will be cool, if I will have an option to define rootDir via --rootDir arg or set it up in nuxt config file, because of pm2-runtime and nuxt args conflict.

jingxinxin

jingxinxin posted a new question

express-template ā€¢ a day ago

Why can't [HMR] to modify the files in the api folder path but other files can work?

What needs to be configured?

Can you give an example?

Please

lobo-tuerto

lobo-tuerto posted a new bug report

nuxt.js ā€¢ a day ago

bug Vuetify theme colors are not rendered properly

Version

v1.4.2

Reproduction link

https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vuetify

Steps to reproduce

I cloned the whole Nuxt repo at: https://github.com/nuxt/nuxt.js

Then navigated to: nuxt.js/examples/with-vuetify

Then installed dependencies with yarn install and ran the server with yarn dev.

Then opened http://localhost:3000 and saw that no colors are being presented. It's all black and white.

If I have something like <v-btn color="primary">Something</v-btn> the text is not visible as it is colored white.

What is expected ?

Screenshot_2018-08-20 https nuxt-with-vuetify-example surge sh.png

What is actually happening?

Screenshot_2018-08-20 Screenshot.png

Additional comments?

I'm on Linux Manjaro.
Node 10.9.0.
it's the same with Nuxt 1.4.2 or nuxt-edge.

luishdz1010

luishdz1010 posted a new feature request

nuxt.js ā€¢ a day ago

idea Allow layouts or the error layout to use fetch/asyncData

What problem does this feature solve?

My error page lives in a layout that needs to pull data for menus/footer, since layouts can't have fetch/asyncData blocks I normally add the fetch logic to the pages that use a specific layout. However this workaround doesn't work for the error page since it is not a page, but a layout.

This can't be done on NuxtServerInit because:

a) requests dispatched in nuxtServerInit are blocking, i.e. nuxt waits until the promise returned from nuxtServerInit is resolved before continuing, which makes things x2 slower when a page has other requests to make (all requests can and should be run in parallel)
b) different layouts have different fetch needs
c) wouldn't work on SPA mode

Do you guys have any workaround for this? Currently, my 404 error pages render with an empty footer and menu.

What does the proposed changes look like?

Add fetch and/or asyncData support to layouts, or at least the error layout.

NickSynev

NickSynev posted a new question

nuxt.js ā€¢ 2 days ago

Nuxt router in the separate service?

How can I import nuxt router in the separate service without sending it from component?

besnikh

besnikh posted a new question

localforage-module ā€¢ 2 days ago

How to use localForage with Vuex ?

Hi,

I am able to use local forage as a method, but I can not use it in store.. I tried different options but I could not manage to do it.

As a method, this is what I am doing

async localForage () {
      let data = {
        name: 'test',
        operation: 'Nav-Business'
      }
      await this.$localForage.setItem('nav', data)
        .then(data => {
          console.log('Working', data)
        })
        .catch(error => {
          console.log(error)
        })
    }

Thnx in advance

carneiroskeeled

carneiroskeeled posted a new feature request

nuxt-i18n ā€¢ 2 days ago

idea Accept a promise in the pages option

What problem does this feature solve?

In my project I don't have the routes (pages and respective translations) available until I generate/run nuxt since I am getting it from another source (Contentful), and getting them from Contentful is a promise. Shouldn't nuxt-i18n accept a promise in this option or is there a better way to do this?

potato4d

potato4d resolved the question #c57

create-nuxt-app ā€¢ 2 days ago

bash: create-nuxt-app: command not found

@himanshu64

Can not solve with the following command?

$ export PATH="/home/dell/.npm-global/bin:$PATH"
$ create-nuxt-app <project-name>
woodgates

woodgates fixed the bug report #c56

create-nuxt-app ā€¢ 2 days ago

bug statusCode: 404
manniL

manniL fixed the bug report #c7604

nuxt.js ā€¢ 2 days ago

bug [edge] error TypeError: request.charCodeAt is not a function