Old Documentation of Nuxt.js 💚 - not in use anymore
Our new docs are in beta and have now moved to the Nuxtjs.org repo where you will find then under the content/ folder as the new docs are now using the content module. Please see the ReadMe of that repo for more info on how to contribute.
The Schema image is showing a misspelled Navigate transition on the right.
the e.g. for module for store need change
export const state = () => {
counter: 0
}
if use state = {...}
next error that
[nuxt] state should be a function
after upgrading to rc7 I noticed a difference in the alias. The example in the docs no longer works
~assets/your_image.pngI had to change it to
~/assets/your_image.pngI am using the defaults. I can create a pr for the change in the docs but I was curious if anyone else had this issue or if I somehow did not update properly.
We would like to put your logo on an "Active Projects". Could we do that?
Thanks in advance 🙇
cc:/ @alexchopin @Atinux
Hi,
Most of the english docs could use some editing/rewriting to make them read like native English. There's a good number of grammar mistakes and awkward word choices and sentence structures.
I'd love to help, but I'm new to open source. Do I just fork this project and start editing? Do I do a PR after each page?
When reading the doc and changing the page, I get the error: Cannot read property 'status' of undefined
If I open the page on a new tab, there is no problem.
Edit: Hum... seems to work now
Here is a quick checklist keeping track of all needed changes. (WIP)
https://github.com/nuxt/docs/tree/1.0
Maybe it's just me becoming sorta blind (and then I'm just sorry to bother), but I can't find anything named "Release Notes" anywhere except menu.json file. Which means I can't translate it, which worries me a little. Could you please clarify what's going on?
Related to nuxt/nuxt#641
Hi guys, please take a look at translation-gang#11
I wonder, where should I put a Russian flag image in order to make it work?
Hello everyone, I am translating Nuxt documentation into Spanish, I hope it helps people in Latin America to know and use this framework more
Hello,
I add script: [{
src: 'sw.js'
}]
in the nuxt.config file under head, but i get a 404.
Please help.
This page is titled Unit Testing but describes e2e testing:
Ava is a powerful JavaScript testing framework, mixed with jsdom, we can use them to do end-to-end testing easily.
I'm struggling to setup unit testing of my components, I'm currently using ava-webpack but this library removes some of the good stuff that comes with AVA.
Have you had any experience unit testing components in a Nuxt app? Cheers
AS-IS
- 'as_error_occured': "An error occured",
TO-BE
- 'as_error_occurred": "An error occurred",
In open source community, translation is important but it is very difficult so we are creating localization tool to help translated ones updated as well. 💯 It's name is GitLocalize. The reason that we built it was translation problem of Node.js.
It have been used in "GitHub - vuejs/vue-ssr-docs, GitLocalize - vuejs/vue-ssr-docs" So I think it is a time to try our service in Nuxt.js community. We provide these features below:
Looking forward to hearing your thoughts 😄
cc:/ @gbezyuk, @inouetakuya, @DiyLecko, @mamboer, @chuyik
‘In case you need to require some libraries only for the server, you can use the process.server variable set to true when webpack is creating the server.bundle.js file.’
commone.hash.js is too big in Browser.i found it contain some plugins that only-run in Server.Reading the doc . i don't understand how to set 'process.server' = true .where ?
If you are a french people, we will can speak together because my issue concern only the french documentation.
Je souhaiterais aider à la traduction, relecture et maintenance de la traduction de Nuxt. J'ai déjà fait un petit topo sur le sujet ici :
— nuxt/website-v2#63
et ai eu la bénédiction d'@Atinux ici :
— https://twitter.com/Atinux/status/907904353117372417
Il ne me reste plus qu'a me tourner vers vous pour savoir si je peux effectivement aider.
Comme expliqué, l'équipe FR de Vuejs-FR n'utilise pas GitLocalise pour travailler, notamment pour permettre n'imorte quel utilisateur standard d'améliorer la documentation via les processus de PR nous permettant des revus et des commentaires avant validation et mais surtout parce que lorsque l'on nous a présenté l'outil, nous n'avons pas été convaincu.
Cette documentation est donc une bonne occasion de tester l'outil pour revoir notre papier pourquoi pas :)
J'ai donc essayer de relire et corriger le fichier index.md :
— https://gitlocalize.com/repo/100/fr/en/guide/index.md mais impossible de faire quoi que ce soit.
Par exemple, j'ai essayer, en cliquant dans la partie de droite de « Link to a segment » dans la partie de gauche mais rien ne fonctionne... au secours :D
Plus globalement, j'aimerai savoir comment :
— Débloquer le confilt ?
— Discuter à propos des changements de traduction ?
— Où est la base d'uniformation des traductions ?
— Modifier le dépôt depuis GitHub est-il tout de même possible ?
— Quel est votre processus de relecture ?
Merci pour votre aide !
My node is v7.10.0
I guess there should be a simple way to avoid being redirected to the home page of the documentation site when changing the language. And maybe it should be implemented, as it doesn't seem to be a rare case when a user comes to the English version of the site via a link or search engine results and then realises there's a translated version in her native language, clicking on the flag... and being moved away from the original stuff she was looking for.
FAQ Sidemenu not showing
https://nuxtjs.org/faq
subj
For Russian docs somehow we need to lead people to TG translation repo, not the primary one at nuxt/docs when they've caught a typo.
I would recommend adding documentation about adding Google Tag Manager and using Google Analytics through that. GTM has history change tags allowing for easy GA tracking with SPAs.
Gyles
This has been touched upon before in nuxt/nuxt#1732 and nuxt/nuxt#493. But I had to do quite a lot of experimentation before I got it to work.
Below is my nginx config. I'm not saying it's the best config but it works and should provide a good start. Where YOUR_WEBSITE_FOLDER is changed to your web site folder and YOUR_WEBSITE_DOMAIN is your website URI.
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/before/*;
map $sent_http_content_type $expires {
"text/html" epoch;
"text/html; charset=utf-8" epoch;
default off;
}
server {
listen 80;
listen [::]:80;
server_name YOUR_WEBSITE_DOMAIN;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
charset utf-8;
gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1000;
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/server/*;
location / {
expires $expires;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://127.0.0.1:3000;
}
#location = /favicon.ico { access_log off; log_not_found off; }
#location = /robots.txt { access_log off; log_not_found off; }
access_log off;
error_log /var/log/nginx/YOUR_WEBSITE_FOLDER-error.log error;
#error_page 404 /index.php;
#location ~ \.php$ {
# fastcgi_split_path_info ^(.+\.php)(/.+)$;
# fastcgi_pass unix:/var/run/php/php7.1-fpm.sock;
# fastcgi_index index.php;
# include fastcgi_params;
#}
location ~ /\.(?!well-known).* {
deny all;
}
}
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/after/*; First I started with the Auth0 example. By adding the name of the middleware to nuxt.config.js, It only calls the middleware when I make a route change. It does not call the middleware on initial page load. I tried to rename the middleware to "default", which is the same name of my layout, but that didn't work. How can I make sure a middleware is called on initial page load? Thanks.
Hi there!
Sometimes there's a need to have data fetched not for a particular page, but for the whole app. Is there a way to specify a global fetch method? If there's one, are there any docs on this issue?
I've tried specifying fetch for the layout, and it didn't work. Neither it would work for the component, I guess.
I belive we should update the code at /lib/app/server.js#L94, adding layout's fetch method there.
As an illustration on why it's an important feature, consider contact information editable via admin and coming from backend via API; or a a simple list of pages working the same way.
cc:/ @inouetakuya
Why are some translation directory names using Country Code instead of Language Code? I think directory name should use language code. For example, we should choose ja instead of jp in Japanese translation.
Thanks in advance 🙇
I did not realize until looking into the source code that nuxtServerInit can be async and work with promises. I think this is very helpful.
Can more information be added to the documentation?
Note: I was going to send a merge requests, but realized that this site has multiple versions of each page for language support. If it is helpful for me to send a merge request for English only, I can do so.
When I follow the setup instructions (npm install, npm run dev) I get the following error when I run the dev command:
/Users/jordanranson/projects/docs/api.js:37
async function getReleases () {
^^^^^^^^
SyntaxError: Unexpected token function
at Object.exports.runInThisContext (vm.js:78:16)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:420:7)
at startup (bootstrap_node.js:139:9)
at bootstrap_node.js:535:3
[nodemon] app crashed - waiting for file changes before starting...
Hi guys! Please take a look at translation-gang#10
I know that in original Vue's docs the similar problem is solved (in fact, you don't even need to specify any anchor manually, as we do now in menu.json's to params).
I'm trying to add google analytics with the method described at https://github.com/nuxt/docs/blob/master/en/faq/google-analytics.md but get the following error when running npm run dev. How do I solve this?
This dependency was not found:
* ~router in ./plugins/ga.js
To install it, you can run: npm install --save ~router
Error: listen EADDRINUSE 127.0.0.1:3000
at Object.exports._errnoException (util.js:1022:11)
at exports._exceptionWithHostPort (util.js:1045:20)
at Server.setupListenHandle [as _listen2] (net.js:1315:14)
at listenInCluster (net.js:1363:12)
at GetAddrInfoReqWrap.doListen (net.js:1489:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:96:10)
Hi there!
Is there a possibility to specify redirects in Nuxt?
And if there is, is there any documentation for it?
(initially mistakenly opened at nuxt/website-v2#11)
this:
Vuex.Store instance. Available only if store: true is set in nuxt.config.js
https://nuxtjs.org/api/#context
should be somewhere at the top of this:
https://nuxtjs.org/guide/vuex-store
otherwise, you're going to have to import it in your .vue
middleware demo page is not working when I click the live demo button in https://nuxtjs.org/examples/middleware/ url.
Please check about it :)
## 模板
> 你可以定制化 Nust.js 默认的应用模板。
定制化默认的 html 模板，只需要在应用根目录下创建一个 `app.html` 的文件。
The text Nust.js is not correct. It should be Nuxt.js.
for 0.10.0 breaking change .
like asyncData , or generate.route
in document cn , jp , ru is the old version . ( 0.9.9 )
I know document need time make it correct
but if show 0.10.0 will let some people misunderstanding .
especially breaking change .
so , I think if translate not prepare for 0.10.0 is should only display 0.9.9
( maybe someday update to 1.0.0 .... if no translate version , it should show , no translate for this version , please see English version )
or , It should be fix correct content version ASAP.
I know some people very depend there native language document , but wrong version display will misleading them . ( I will told you someone is my friend 😆 )
✋ Thanks a lot to all the contributors and people helping to make Nuxt.js better! ✋
When I Following the step of The generate Property
https://nuxtjs.org/api/configuration-generate/
because I have dynamic params, so I try to following the step of Function which returns a Promise
But error happened!!!
nuxt.config.js
...
import axios from 'axios'
module.exports = {
generate: {
routeParams: {
...
Error:@@
$ npm run generate
> [email protected] generate C:\xampp\htdocs\adam_lab\vue\nuxt
> nuxt generate
C:\xampp\htdocs\adam_lab\vue\nuxt\nuxt.config.js:1
(function (exports, require, module, __filename, __dirname) { import axios from 'axios'
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\xampp\htdocs\adam_lab\vue\nuxt\node_modules\nuxt\bin\nuxt-generate:15:13)
at Module._compile (module.js:570:32)
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Adam\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "generate"
npm ERR! node v6.9.5
npm ERR! npm v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] generate: `nuxt generate`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] generate script 'nuxt generate'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the nuxt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! nuxt generate
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs nuxt
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls nuxt
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\xampp\htdocs\adam_lab\vue\nuxt\npm-debug.log
What's happened ~ORZ
Hello,
The description, Nuxt.js use the file-system to generate the routes of your web applications, it's as simple as PHP to create routes., in Guide/Routing bothers me for two reasons:
Should we change it to something like: Nuxt.js use the file-system to generate the routes of your web applications.
Thanks
(View the original discussion, in french, here: https://github.com/vuejs-fr/nuxt/pull/11/files/52bf57bc0b8769b29762f07577ad9f8fefd9bae2#r139283562)
As stated before, great to see those docs coming!
I had a first read of them and here is some feedback. Overall the doc is very clear and straightforward, yet a few things could be improved. A lot of those comments assume your target an audiance new to VueJS and might not be so relevant but I'll let you guys judge of that.
/foo directory you automatically get the ~foo alias right?/post/42 to display a specific post with an ID from the URL. I don't think this goes into "advanced" routing as you're going to need to do that in almost any app you're going to write路由绑定的页面组件? 请问这句话怎么理解？
Hi I followed the google analytics plugin. It works for the first request (serverside-rendered), but on the following (browser-rendered) it tracks pages but with the title of the previous page-request.
I'm inserting html-title via vue-meta, I guess the afterEach-callback fires to early?
when [import Beauty from 'vue-beauty'], the console print window or document not define.
as i saw that your website FAQ has solved this problem, but when i do so, the label can not be translate by vue also in browser.
i am in trouble of it, wait for your help.
vue-beauty git address : https://github.com/FE-Driver/vue-beauty
Hi there,
the Google Analytics link on https://github.com/nuxt/docs/blob/master/en/faq/google-analytics.md is not working.
I would have created a PR but I don't know where it should go to.
Hello dear Nuxt developers,
I've found a weird bug in your guide.
If I go to the official link (reachable by link in the docs website itself): https://nuxtjs.org/guide/async-data
I see the old async Data guide, which is no more valid in the current Nuxt.js version.
Then, in your releases page here on github, I've found you linked to https://nuxtjs.org/guide/async-data/ ..
But it brings me to the new asyncData guide, which is the right one!
Actually, you link always to the page without the trailing slash, but for some reasons it has redirected me to the "slashed" one when clicking via Github. While this doesn't happen through the website navigation.
I think this should be an ssr/client mismatch bug.
Since I was quite desperate to find a solution because async Data didn't work in any way and I lost a lot of time figuring out what was happening, please fix it for other people!
P.S.: the first asyncData link in fact redirects me to the right one here too, because it is an external website and it does a server request to your docs website. To reach the page, you should do a client request going to the docs and clicking Async Data on the left column.
Then you will see the guide is quite different, as it was for the previous Nuxt version.
Hi, Im from Thailand. And I found Nuxtjs is very useful and I think it would be great if nuxtjs let ppl to translate to they language 🙂
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.