nuxt / nuxt Goto Github PK
View Code? Open in Web Editor NEWThe Intuitive Vue Framework.
Home Page: https://nuxt.com
License: MIT License
The Intuitive Vue Framework.
Home Page: https://nuxt.com
License: MIT License
Not sure the best way to implement this, but just like in a normal Vue app, we should be able to do:
<style lang="sass">
@import './defaults.scss'
body
color: $color-primary
</style>
But as expected, the build fails because of no webpack sass-loader
If importing the default object of .js
file in a .vue
file, the default object will be wrapped.
foo.js
export default {
bar: 123
};
some.vue
import foo from './foo';
// need to use foo.default to access the default object
console.log(foo.default.bar);
I think the problem is because vue-loader
did not config the babel option: modules: false
at https://github.com/nuxt/nuxt.js/blob/master/lib/build/webpack/vue-loader.config.js#L7
let config = {
postcss: this.options.build.postcss,
loaders: {
'js': 'babel-loader?presets[]=es2015&presets[]=stage-2',
'less': 'vue-style-loader!css-loader!less-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
'scss': 'vue-style-loader!css-loader!sass-loader',
'stylus': 'vue-style-loader!css-loader!stylus-loader',
'styl': 'vue-style-loader!css-loader!stylus-loader'
}
}
I wonder why set the babel options here rather than use the .babelrc ?
As it stands today, is there a good way to connect to a server-side database and render pages that work without JavaScript on the client, but can progressively enhance to use JavaScript on the client if available? Essentially that would mean not exposing a rest API, but instead having some sort of data provider mechanism that doesn't leak secrets to the client.
When running yarn run generate
i get: Could not generate the dynamic route /articles/:slug, please add the mapping params in nuxt.config.js (generate.routeParams).
I can't seem to tell from the source code and/or other projects what config i actually need for this to work.
When I try to run the provided custom-routes example, I get the following error. I've also been able to replicate the bug in my own project by trying to use the hidden pages feature when defining routes.
TypeError: Cannot read property 'path' of undefined
at VueRouter.match (C:\Users\Anthony\Desktop\custom-routes\node_modules\vue-router\dist\vue-router.common.js:1135:44)
at VueRouter.resolve (C:\Users\Anthony\Desktop\custom-routes\node_modules\vue-router\dist\vue-router.common.js:2037:23)
at Proxy.render (C:\Users\Anthony\Desktop\custom-routes\node_modules\vue-router\dist\vue-router.common.js:300:22)
at VueComponent.Vue._render (C:\Users\Anthony\Desktop\custom-routes\node_modules\vue\dist\vue.runtime.common.js:2925:22)
at renderComponent (C:\Users\Anthony\Desktop\custom-routes\node_modules\vue-server-renderer\build.js:5888:25)
at renderNode (C:\Users\Anthony\Desktop\custom-routes\node_modules\vue-server-renderer\build.js:5871:7)
at next (C:\Users\Anthony\Desktop\custom-routes\node_modules\vue-server-renderer\build.js:6007:9)
at cachedWrite (C:\Users\Anthony\Desktop\custom-routes\node_modules\vue-server-renderer\build.js:36:9)
at renderElement (C:\Users\Anthony\Desktop\custom-routes\node_modules\vue-server-renderer\build.js:5931:5)
at renderNode (C:\Users\Anthony\Desktop\custom-routes\node_modules\vue-server-renderer\build.js:5875:7)
I'm running Node version v6.9.1 on Windows 10.
Is it possible to only execute certain bits of code like we can with base webpack or vue-router require.ensure
, System.import
? If so would this be possible after generate
too?
My use case is using highlight.js
but i'd only wanna load this on certain routes
I've installed nuxt.js using vue init nuxt/starter nuxt-site
, all is fine, but when the page is loaded from the server, soon I see the page without styles, which are applied a fraction of second later.
I don't think (maybe I'm wrong), but is this the right behavior? π
Nuxt has some difficulties since the update of [email protected], I'm looking into it.
It's due of a change in vuejs/vue@cb4854a#diff-b92dd5290072b5c2c54f2515cc1ab572R21
I created a page file and linked to it using the <router-link>
element, but it 404s.
I see in the .nuxt
folder there are some routes defined e.g.
const _3cb81d92 = process.BROWSER_BUILD ? () => System.import('/Users/heydonpickering/repositories/project-folder/pages/about.vue') : require('/Users/heydonpickering/repositories/project-folder/pages/about.vue')
These are clearly added dynamically on webpack build, but I don't know where to add a new one?
Many thanks.
Any way to add the javascript hooks to the <transition>
?
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
Maybe we could simply add transition: { hooks: true }
as a viable option in nuxt-config? And then add the same as above into <transition>
(seems overkill to be able to name the hooks yourself).
Thing to watch out for though:
Itβs also a good idea to explicitly add v-bind:css="false" for JavaScript-only transitions so that Vue can skip the CSS detection. This also prevents CSS rules from accidentally interfering with the transition.
Here below are the log messages:
ERROR in ./~/babel-loader/lib?presets[]=es2015&presets[]=stage-2!./~/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue
Module not found: Error: Can't resolve 'I:Projectscms
ode_modules
uxtlibappcomponents
uxt-error-debug.vue' in 'I:\Projects\cms\.nuxt'
@ ./~/babel-loader/lib?presets[]=es2015&presets[]=stage-2!./~/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue 7:62-141
@ ./.nuxt/App.vue
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi app
The main problem is that some import
s / System.import
s in generated code under .nuxt
folder doesn't escape the directory path \
:
const _eb75b49c = process.BROWSER ? () => System.import('I:\Projects\test\pages\index.vue') : require('I:\Projects\test\pages\index.vue')
import NuxtError from 'I:\Projects\test\node_modules\nuxt\lib\app\components\nuxt-error-debug.vue'
Can we use relative path and forward slash /
or escape backslash in the path?
Hi today i try nuxt by running this command
vue init nuxt/starter nuxt
cd nuxt
yarn install
npm run dev
And getting this error
$ npm run dev
> [email protected] dev /home/ferri/Developments/web/nuxt
> nuxt
/home/ferri/Developments/web/nuxt/node_modules/nuxt/bin/nuxt:3
const { join } = require('path')
^
SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:974:3
This is my system
$ npm --version
3.10.9
$ yarn --version
0.15.1
OS Freya / Ubuntu 14.04 64 bit
Thanks
Currently, I see output.publicPath
is automatically set to urlJoin(this.options.router.base, '/_nuxt/')
. But we need to put the static assets to a CDN, something like cdn.example.com
. So could you add an option in nuxt.config.js
to allow us set a publicPath manually?
I and my team really like nuxt.js, it made SSR super damn easy. We are using it in our new project.
Keep on guys!
Using symbols (:, &, #) in nuxt.config.js stops the development server and throws an error:
I found this issue when trying to use an & in my description meta data, it only occurs when the development server is running and running yarn or npm run dev again fixes the issue and the error no longer shows.
Environment:
Nuxt 0.8.8,
Node v7.1.0
Error while rebuild the app: { Error: ENOTEMPTY: directory not empty, rmdir '/mnt/c/Users/Anthony/Documents/acook.me/.nuxt/components'
errno: -39,
code: 'ENOTEMPTY',
syscall: 'rmdir',
path: '/mnt/c/Users/Anthony/Documents/acook.me/.nuxt/components' }
Hi, I think a lot of issues faced by Next.js apply to Nuxt.js also, and I believe that ultimately, such a feature will require a way to allow for custom server workflows, with session support etc.
Interested to discuss this.
If the configuration file change during the execution of the development server, it automatically aplies the new configuration, but if the file becomes invalid (a missing comma or semicolon, we all do that sometimes!) the server crashes, needing to be restarted (after fixing the file).
When running a development server, I don't expect it to crash for any reason, no matter what happens the server should only display an error message and wait until things go back normal.
For example,
import Widget from '~components/widget'
Works for...
./components/widget.js
./components/widget.json
./components/widget/index.js
./components/widget/index.json
But, not for...
./components/widget.vue
./components/widget/index.vue
For some reason, just installing nuxt
doesn't work.
"ansi-regex": "^2.0.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"html-entities": "^1.2.0",
"memory-fs": "^0.3.0",
"nuxt": "^0.7.4",
"strip-ansi": "^3.0.1"
is also required.
So lets back track here.
nuxt
:$ npm i nuxt
npm WARN package.json test-foo@1.0.0 No description
npm WARN package.json test-foo@1.0.0 No repository field.
npm WARN package.json test-foo@1.0.0 No README data
npm WARN optional dep failed, continuing fsevents@1.0.15
...
nuxt@0.7.4 node_modules\nuxt
βββ pify@2.3.0
βββ serialize-javascript@1.3.0
βββ co@4.6.0
βββ es6-object-assign@1.0.3
βββ ansi-html@0.0.6
βββ hash-sum@1.0.2
βββ vuex@2.0.0
βββ vue-router@2.0.3
βββ es6-promise@4.0.5
βββ vue-meta@0.5.2 (object-assign@4.1.0, lodash.escape@4.0.1, lodash.isplainobject@4.0.6, deepmerge@1.3.0)
βββ debug@2.3.3 (ms@0.7.2)
βββ path-to-regexp@1.7.0 (isarray@0.0.1)
βββ lru-cache@4.0.1 (pseudomap@1.0.2, yallist@2.0.0)
βββ file-loader@0.9.0 (loader-utils@0.2.16)
βββ url-loader@0.5.7 (mime@1.2.11, loader-utils@0.2.16)
βββ fs-extra@1.0.0 (klaw@1.3.1, jsonfile@2.4.0, graceful-fs@4.1.11)
βββ vue-template-compiler@2.1.3 (de-indent@1.0.2, he@1.1.0)
βββ vue-server-renderer@2.1.3 (de-indent@1.0.2, he@1.1.0)
βββ webpack-hot-middleware@2.13.2 (html-entities@1.2.0, querystring@0.2.0, strip-ansi@3.0.1)
βββ cross-spawn@5.0.1 (shebang-command@1.2.0, which@1.2.12)
βββ serve-static@1.11.1 (escape-html@1.0.3, encodeurl@1.0.1, parseurl@1.3.1, send@0.14.1)
βββ glob@7.1.1 (path-is-absolute@1.0.1, inherits@2.0.3, fs.realpath@1.0.0, once@1.4.0, inflight@1.0.6, minimatch@3.0.3)
βββ extract-text-webpack-plugin@2.0.0-beta.4 (async@1.5.2, loader-utils@0.2.16, webpack-sources@0.1.3)
βββ babel-loader@6.2.8 (object-assign@4.1.0, loader-utils@0.2.16, mkdirp@0.5.1, find-cache-dir@0.1.1)
βββ webpack-dev-middleware@1.8.4 (path-is-absolute@1.0.1, range-parser@1.2.0, mime@1.3.4, memory-fs@0.3.0)
βββ vue@2.1.3
βββ chokidar@1.6.1 (path-is-absolute@1.0.1, inherits@2.0.3, async-each@1.0.1, glob-parent@2.0.0, is-glob@2.0.1, is-binary-path@1.0.1, readdirp@2.1.0, anymatch@1.3.0)
βββ vue-loader@10.0.1 (object-assign@4.1.0, vue-hot-reload-api@2.0.6, vue-style-loader@1.0.0, vue-template-es2015-compiler@1.3.0, loader-utils@0.2.16, source-map@0.5.6, postcss-selector-parser@2.2.2, consolidate@0.14.5, postcss@5.2.6, js-beautify@1.6.4)
βββ css-loader@0.26.0 (postcss-modules-extract-imports@1.0.1, object-assign@4.1.0, lodash.camelcase@4.3.0, loader-utils@0.2.16, postcss-modules-values@1.2.2, source-list-map@0.1.6, babel-code-frame@6.16.0, css-selector-tokenizer@0.7.0, postcss-modules-scope@1.0.2, postcss-modules-local-by-default@1.1.1, postcss@5.2.6, cssnano@3.8.1)
βββ webpack@2.1.0-beta.27 (object-assign@4.1.0, interpret@1.0.1, tapable@0.2.4, supports-color@3.1.2, ajv-keywords@1.1.1, loader-runner@2.2.0, source-map@0.5.6, loader-utils@0.2.16, mkdirp@0.5.1, enhanced-resolve@2.3.0, acorn@4.0.3, memory-fs@0.3.0, webpack-sources@0.1.3, async@2.1.4, watchpack@1.1.0, ajv@4.9.0, uglify-js@2.7.4, node-libs-browser@1.1.1, yargs@6.4.0)
βββ autoprefixer@6.5.3 (normalize-range@0.1.2, num2fraction@1.2.2, postcss-value-parser@3.3.0, browserslist@1.4.0, postcss@5.2.6, caniuse-db@1.0.30000587)
βββ lodash@4.17.2
βββ babel-core@6.18.2 (slash@1.0.0, babel-messages@6.8.0, path-is-absolute@1.0.1, babel-template@6.16.0, babel-helpers@6.16.0, private@0.1.6, json5@0.5.0, babylon@6.14.1, convert-source-map@1.3.0, source-map@0.5.6, babel-types@6.19.0, minimatch@3.0.3, babel-code-frame@6.16.0, babel-traverse@6.19.0, babel-generator@6.19.0, babel-register@6.18.0, babel-runtime@6.18.0)
βββ [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
βββ babel-preset-stage-2@6.18.0 (babel-plugin-syntax-dynamic-import@6.18.0, babel-plugin-transform-decorators@6.13.0, babel-plugin-transform-class-properties@6.19.0, babel-preset-stage-3@6.17.0)
npm run dev
> test-foo@1.0.0 dev C:\Users\zenobius\Projects\test-foo
> nuxt
nuxt:build App root: C:\Users\zenobius\Projects\test-foo +0ms
nuxt:build Generating .nuxt/ files... +2ms
nuxt:build Generating routes... +6ms
nuxt:build Generating files... +3ms
nuxt:build Adding webpack middlewares... +25ms
{ Error: Cannot find module 'memory-fs'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Nuxt.webpackWatchAndUpdate (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\lib\build\index.js:250:15)
at Nuxt.module.exports (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\lib\build\index.js:129:27)
at next (native)
at onFulfilled (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\co\index.js:65:19) code: 'MODULE_NOT_FOUND' }
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files (x86)\\Nodist\\v-x64\\6.9.1\\node.exe" "C:\\Program Files (x86)\\Nodist\\npmv\\2.15.10\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.9.1
npm ERR! npm v2.15.10
npm ERR! code ELIFECYCLE
npm ERR! test-foo@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-foo@1.0.0 dev script 'nuxt'.
npm ERR! This is most likely a problem with the test-foo package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! nuxt
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs test-foo
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls test-foo
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\zenobius\Projects\test-foo\npm-debug.log
Nope...
memory-fs
$ npm i -S memory-fs
$ npm run dev
> test-foo@1.0.0 dev C:\Users\zenobius\Projects\test-foo
> nuxt
nuxt:build App root: C:\Users\zenobius\Projects\test-foo +0ms
nuxt:build Generating .nuxt/ files... +2ms
nuxt:build Generating routes... +5ms
nuxt:build Generating files... +2ms
nuxt:build Adding webpack middlewares... +19ms
Ready on http://localhost:3000
./.nuxt/server.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "C:\\Users\\zenobius\\Projects\\test-foo"
at C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:299:19
at Array.map (native)
at OptionManager.resolvePresets (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:270:20)
at OptionManager.mergePresets (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:259:10)
at OptionManager.mergeOptions (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:244:14)
at OptionManager.init (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:374:12)
at File.initOptions (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\index.js:216:65)
at new File (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\index.js:139:24)
at Pipeline.transform (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-loader\lib\index.js:41:20)
webpack built 53381c8f33547a6b069d in 740ms
Hash: 53381c8f33547a6b069d
Version: webpack 2.1.0-beta.27
Time: 740ms
Asset Size Chunks Chunk Names
nuxt.bundle.js 23.2 kB 0 app
vendor.bundle.js 301 kB 1 vendor
nuxt.bundle.js.map 26.7 kB 0 app
vendor.bundle.js.map 369 kB 1 vendor
ERROR in (webpack)-hot-middleware/client.js?reload=true
Module not found: Error: Can't resolve 'strip-ansi' in 'C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\webpack-hot-middleware'
@ (webpack)-hot-middleware/client.js?reload=true 95:14-35
@ multi app
ERROR in (webpack)-hot-middleware/client-overlay.js
Module not found: Error: Can't resolve 'html-entities' in 'C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\webpack-hot-middleware'
@ (webpack)-hot-middleware/client-overlay.js 40:15-39
@ (webpack)-hot-middleware/client.js?reload=true
@ multi app
ERROR in ./.nuxt/client.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "C:\\Users\\zenobius\\Projects\\test-foo"
at C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:299:19
at Array.map (native)
at OptionManager.resolvePresets (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:270:20)
at OptionManager.mergePresets (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:259:10)
at OptionManager.mergeOptions (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:244:14)
at OptionManager.init (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\options\option-manager.js:374:12)
at File.initOptions (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\index.js:216:65)
at new File (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\file\index.js:139:24)
at Pipeline.transform (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\babel-loader\lib\index.js:41:20)
@ multi app
Which spams the terminal with errors forever until ctrl+c
$ npm i -S html-entities ansi-regex babel-preset-stage-2 babel-preset-es2015
npm WARN package.json test-foo@1.0.0 No description
npm WARN package.json test-foo@1.0.0 No repository field.
npm WARN package.json test-foo@1.0.0 No README data
ansi-regex@2.0.0 node_modules\ansi-regex
html-entities@1.2.0 node_modules\html-entities
babel-preset-es2015@6.18.0 node_modules\babel-preset-es2015
βββ babel-plugin-transform-es2015-literals@6.8.0 (babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-duplicate-keys@6.8.0 (babel-types@6.19.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-modules-umd@6.18.0 (babel-template@6.16.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-modules-amd@6.18.0 (babel-template@6.16.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-block-scoped-functions@6.8.0 (babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-typeof-symbol@6.18.0 (babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-computed-properties@6.8.0 (babel-template@6.16.0, babel-helper-define-map@6.18.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-sticky-regex@6.8.0 (babel-helper-regex@6.18.0, babel-types@6.19.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-template-literals@6.8.0 (babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-destructuring@6.19.0 (babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-for-of@6.18.0 (babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-shorthand-properties@6.18.0 (babel-types@6.19.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-modules-systemjs@6.19.0 (babel-template@6.16.0, babel-helper-hoist-variables@6.18.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-unicode-regex@6.11.0 (regexpu-core@2.0.0, babel-helper-regex@6.18.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-arrow-functions@6.8.0 (babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-modules-commonjs@6.18.0 (babel-plugin-transform-strict-mode@6.18.0, babel-template@6.16.0, babel-types@6.19.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-object-super@6.8.0 (babel-helper-replace-supers@6.18.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-parameters@6.18.0 (babel-helper-get-function-arity@6.18.0, babel-helper-call-delegate@6.18.0, babel-template@6.16.0, babel-types@6.19.0, babel-traverse@6.19.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-block-scoping@6.18.0 (babel-template@6.16.0, babel-types@6.19.0, babel-traverse@6.19.0, lodash@4.17.2, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-function-name@6.9.0 (babel-types@6.19.0, babel-helper-function-name@6.18.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-spread@6.8.0 (babel-runtime@6.18.0)
βββ babel-plugin-check-es2015-constants@6.8.0 (babel-runtime@6.18.0)
βββ babel-plugin-transform-es2015-classes@6.18.0 (babel-helper-replace-supers@6.18.0, babel-helper-optimise-call-expression@6.18.0, babel-messages@6.8.0, babel-helper-function-name@6.18.0, babel-template@6.16.0, babel-helper-define-map@6.18.0, babel-types@6.19.0, babel-traverse@6.19.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-regenerator@6.16.1 (private@0.1.6, babel-types@6.19.0, babel-runtime@6.18.0)
babel-preset-stage-2@6.18.0 node_modules\babel-preset-stage-2
βββ babel-plugin-syntax-dynamic-import@6.18.0
βββ babel-plugin-transform-decorators@6.13.0 (babel-plugin-syntax-decorators@6.13.0, babel-helper-define-map@6.18.0, babel-template@6.16.0, babel-types@6.19.0, babel-helper-explode-class@6.18.0, babel-runtime@6.18.0)
βββ babel-plugin-transform-class-properties@6.19.0 (babel-plugin-syntax-class-properties@6.13.0, babel-template@6.16.0, babel-helper-function-name@6.18.0, babel-runtime@6.18.0)
βββ babel-preset-stage-3@6.17.0 (babel-plugin-syntax-trailing-function-commas@6.13.0, babel-plugin-transform-async-to-generator@6.16.0, babel-plugin-transform-exponentiation-operator@6.8.0, babel-plugin-transform-async-generator-functions@6.17.0, babel-plugin-transform-object-rest-spread@6.19.0)
$ npm run dev
> test-foo@1.0.0 dev C:\Users\zenobius\Projects\test-foo
> nuxt
nuxt:build App root: C:\Users\zenobius\Projects\test-foo +0ms
nuxt:build Generating .nuxt/ files... +3ms
nuxt:build Generating routes... +5ms
nuxt:build Generating files... +3ms
nuxt:build Adding webpack middlewares... +20ms
Ready on http://localhost:3000
Boom. getting somewhere... but, without loading any pages:
ERROR in (webpack)-hot-middleware/client.js?reload=true
Module not found: Error: Can't resolve 'strip-ansi' in 'C:\Users\zenobius\Projects\test-foo\node_modules\nuxt\node_modules\webpack-hot-middleware'
@ (webpack)-hot-middleware/client.js?reload=true 95:14-35
@ multi app
$ npm i --save strip-ansi
npm WARN package.json test-foo@1.0.0 No description
npm WARN package.json test-foo@1.0.0 No repository field.
npm WARN package.json test-foo@1.0.0 No README data
strip-ansi@3.0.1 node_modules\strip-ansi
$ npm run dev
> test-foo@1.0.0 dev C:\Users\zenobius\Projects\test-foo
> nuxt
nuxt:build App root: C:\Users\zenobius\Projects\test-foo +0ms
nuxt:build Generating .nuxt/ files... +3ms
nuxt:build Generating routes... +7ms
nuxt:build Generating files... +3ms
nuxt:build Adding webpack middlewares... +18ms
Ready on http://localhost:3000
webpack built ee46c8438c3a8b6ffca2 in 9442ms
webpack building...
webpack built ee46c8438c3a8b6ffca2 in 86ms
nuxt:render Rendering url / +10s
webpack building...
webpack built ee46c8438c3a8b6ffca2 in 131ms
Getting somewhere now.
$ curl http://localhost:3000
<!DOCTYPE html>
<html n-head-ssr n-head="">
<head>
<title n-head="true">This page could not be found.</title>
<base href="/">
</head>
<body n-head="">
<div id="__nuxt" server-rendered="true"><div><div class="progress" style="width:0%;height:2px;background-color:black;opacity:0" data-v-0cc8389e></div> <div class="error-page" data-v-5367edcf><div data-v-5367edcf><h1 class="error-code" data-v-5367edcf>404</h1> <div class="error-wrapper-message" data-v-5367edcf><h2 class="error-message" data-v-5367edcf>This page could not be found.</h2></div> <p data-v-5367edcf><a href="/" class="error-link router-link-active" data-v-5367edcf>Back to the home page</a></p></div></div></div></div>
<script type="text/javascript" defer>window.__NUXT__={"data":[],"error":{"statusCode":404,"message":"This page could not be found.","url":"\u002F"},"serverRendered":true}</script>
<script src="/_nuxt/vendor.bundle.js" defer></script>
<script src="/_nuxt/nuxt.bundle.js" defer></script>
</body>
</html>
Boom. much success. yes.
I know it's very early days, and tbh i'm not even fully sure what a PWA is, but since this does SSR so from the start i wondered if the same was achievable with PWA's.
I've no idea what this entails was just an idea that popped into my head that would make nuxt sites even speedier π
First off, great work so far on nuxt.js
For this issue, some documentation here:
https://docs.npmjs.com/files/package.json#config
Ideally, the package.json would then look like this:
{
"scripts": {
"start": "nuxt"
},
"config": {
"nuxt": {
"port": 4000
}
}
}
This is critical for folks who want to host multiple nuxt.js apps/sites on one server.
Normally I'd achieve persistent state (state that doesn't expire on refresh) by using Vuex and localstorage, it seems Nuxt doesn't play nice with localstorage, I assume this is because of it's server rendering features?
Is there currently a method to get persistent state that's accessible both on the client and the server? If not, is this something that could be implemented in the future?
Hi, We are building our new app using nuxt as an Express.js middleware. Our app must be translated in some languages.
We are looking to use i18next using the i18next vuejs build.
As you can see, to use it, we need to make some Vue configuration.
Vue.use(VueParams);
Vue.use(VueI18Next);
Vue.params.i18nextLanguage = "en";
i18next.init({ lng: Vue.params.i18nextLanguage, ... });
// ...
Don't know if there is a way to add custom Vue configuration by using Nuxt ?
Many thanks :)
I updated nuxt to 0.8.4 but the lib/nuxt.js is not the same as the github tag.
IΒ΄m trying to use the new option srcDir.
I already deleted the node_modules and yarn.lock, I tried to install using npm and yarn.
My local/installed file: lines 51 to 55
// Env variables
this.dev = this.options.dev
this.dir = (typeof options.rootDir === 'string' && options.rootDir ? options.rootDir : process.cwd())
// If store defined, update store options to true
if (fs.existsSync(join(this.dir, 'store', 'index.js'))) {
https://github.com/nuxt/nuxt.js/blob/v0.8.4/lib/nuxt.js
// Env variables
this.dev = this.options.dev
this.dir = (typeof options.rootDir === 'string' && options.rootDir ? options.rootDir : process.cwd())
this.srcDir = (typeof options.srcDir === 'string' && options.srcDir ? resolve(this.dir, options.srcDir) : this.dir)
// If store defined, update store options to true
if (fs.existsSync(join(this.srcDir, 'store', 'index.js'))) {
My package.json
{
"name": "test-nuxt",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "",
"private": true,
"dependencies": {
"axios": "^0.15.3",
"express": "^4.14.0",
"nuxt": "^0.8.4"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "node server",
"generate": "nuxt generate"
}
}
package json inside node_modules/nuxt folder:
{
"_args": [
[
{
"raw": "nuxt@^0.8.4",
"scope": null,
"escapedName": "nuxt",
"name": "nuxt",
"rawSpec": "^0.8.4",
"spec": ">=0.8.4 <0.9.0",
"type": "range"
},
"C:\\Users\\DNPO\\projects\\church-nuxt"
]
],
"_from": "nuxt@>=0.8.4 <0.9.0",
"_id": "[email protected]",
Default:
<template>
<nuxt></nuxt>
</template>
Can be for example: https://github.com/vuejs/vue-hackernews-2.0/blob/master/src/App.vue
And replacing:
<transition name="fade" mode="out-in">
<router-view class="view"></router-view>
</transition>
By:
<nuxt class="view"></nuxt>
Have to register Vue.component('nuxt', 'Nuxt.vue')
(actual App.vue)
What about app.error()
-> app.nuxt.error()
, same for app.$loading
// Nuxt.vue
created() {
this.$root.nuxt = thi
}
BOUM π
I'm trying to run a-frame in one of my vue pages but I'm getting an error in my browser:
ReferenceError: window is not defined
I'm guessing this is because nuxt is trying to run the aframe module while rendering the page on the server.
<template>
<div>
<a-scene fog="type: linear; color: #FFEBDE; far:190" debug>
<a-entity>
<a-collada-model src="/obj/banner.dae"></a-collada-model>
<a-ring color="teal" radius-inner="1" radius-outer="2"></a-ring>
</a-entity>
<a-entity position="0 -1 10">
<a-camera>
<a-cursor color="#2E3A87"></a-cursor>
</a-camera>
</a-entity>
<a-entity camera="userHeight: 1.6" look-controls></a-entity>
</a-scene>
</div>
</template>
<script>
import 'aframe';
export default {
mounted() {
}
}
</script>
Hi,
It seems that loading async data is pretty easy from pages, yet I don't find any way to load data asynchronously from nested components.
To explain what I try to do, I made some example project: https://github.com/Xowap/nuxttest
You'll see that data loaded from index.vue
is correctly rendered server-side yet data in HttpBin.vue
isn't displayed at all and triggers an error.
Is that an anti-pattern? A feature to come?
Thanks,
RΓ©my
I am not sure if I understand it right:
not supporting "children" in routes means we cannot user <router-view>
in vue components, and therefore means all vue files in /pages
are parallel stand-alone pages and cannot be nested. Since theres is actually no "parent component" and "child component", we have no way to pass props
and slots
into a component in /pages
. The only way to pass something in a component is via router params.
Is that correct?
I have trying to make use of the method called nuxt.renderRoute
which indeed calls renderToString
which throws an error saying TypeError: self.renderToString is not a function
.
All I have able to debug is
1.renderToString
is a function on vue-server-renderer https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer
Nuxt
class and Nuxt
class does not have renderToString
method.May be I am missing something?
when we import other lib
Heads up -- https://nuxtjs.org/ is down.
I'm trying to use the srcDir with express. When I access the page, this red message appears:
Vue.js error
Error: Cannot find module "C:\Users\DNPO\projects\church-nuxt\layouts\error.vue"
at webpackMissingModule (__vue_ssr_bundle__:435:78)
at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:435:213)
at __webpack_require__ (__vue_ssr_bundle__:21:30)
at Object.module.exports.__vue_styles__ (__vue_ssr_bundle__:734:19)
at __webpack_require__ (__vue_ssr_bundle__:21:30)
at Object.module.exports.exports.b (__vue_ssr_bundle__:92:79)
at __webpack_require__ (__vue_ssr_bundle__:21:30)
at Object.<anonymous> (__vue_ssr_bundle__:1034:65)
at __webpack_require__ (__vue_ssr_bundle__:21:30)
at __vue_ssr_bundle__:65:18
my nuxt.config.js
const { resolve } = require('path');
module.exports = {
srcDir: resolve('./app'),
head: {
title: 'starter',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', content: "Nuxt.js project" }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }
]
},
css: ['~assets/css/main.css'],
loading: { color: '#3B8070' }
}
server/index.js
const express = require('express');
const Nuxt = require('nuxt');
const nuxtConfig = require('../app/nuxt.config');
const app = express();
console.log(nuxtConfig.srcDir);
app.get('/api', (req, res) => {
res.json('Ok');
});
const nuxt = new Nuxt(nuxtConfig);
nuxt.build();
app.use(nuxt.render);
app.listen(3000, () => {
console.log('now listening port 3000');
});
Hello there, I'm trying to create a really basic app using Nuxt as a middleware and I got an issue when I try to access the server.
Here is the complete error message:
The message appear both in the browser and the terminal
TypeError: Cannot read property 'renderer' of undefined
at render (/home/vincent/WebstormProjects/nuxtExpress/node_modules/nuxt/lib/nuxt.js:94:14)
at Layer.handle [as handle_request] (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:312:13)
at /home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:280:7
at Function.process_params (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:330:12)
at next (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:271:10)
at expressInit (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/middleware/init.js:33:5)
at Layer.handle [as handle_request] (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:312:13)
at /home/vincent/WebstormProjects/nuxtExpress/node_modules/express/lib/router/index.js:280:7
The check in the render
function in lib/nuxt.js
fails because this
is actually undefined.
// nuxt.js
render (req, res) {
if (!this.renderer) { // <--- Here this is undefined
setTimeout(() => {
this.render(req, res)
}, 1000)
return
}
// ...
This may be caused by my code? I'm probably doing something wrong in this file.
// app.js (at project's root)
const express = require('express');
const app = express();
const Nuxt = require('nuxt');
const nuxtConfig = require('./config/nuxt.config');
new Nuxt(nuxtConfig).then((nuxt) => {
app.use(nuxt.render);
app.listen(3000, function () {
console.log('listening port 3000 -> http://localhost:3000');
});
}).catch((error) => {
console.log(error);
});
// config/nuxt.config.js (from project's root)
module.exports = {
build: {
vendor: ['axios']
}
};
<!-- pages/index.vue -->
<template>
<div>
<div>this is template body</div>
<p class="ita">loaded from {{ req }}</p>
</div>
</template>
<style>
body{
background-color: #f9f9f9;
text-align: center;
}
p.ita {
padding: 10px;
font-style: italic;
}
</style>
<script>
export default{
data({ req }){
return{
msg:'hello vue',
req: req ? 'server' : 'client'
}
}
}
</script>
Thanks, and keep up the good work! π
According to the vue.js docs says:
Vue also supports rendering to a stream, which is preferred for web servers that support streaming. This allows HTML to be written to the response as itβs generated, rather than all at once at the end. The result is requests are served faster, with no downsides!
I see Nuxt is using renderToString
to yield the html string. I'm interested the reason why Nuxt not using renderToStream
?
What would you think of a nuxt.js app using making no external resource requests for it's own JS and CSS files? It would all be inline injected into lib/views/app.html
Before:
<% const {
title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
} = context.meta.inject() %><!DOCTYPE html>
<html n-head-ssr ${htmlAttrs.text()}>
<head>
${meta.text()}
${title.text()}
${link.text()}
${style.text()}
${script.text()}
${noscript.text()}
<base href="<%= baseUrl %>">
<% if (!dev) { %><link rel="stylesheet" href="<%= files.css %>"><% } %>
</head>
<body ${bodyAttrs.text()}>
<%= APP %>
<script type="text/javascript" defer>window.__NUXT__=<%= serialize(context.nuxt) %></script>
<script src="<%= files.vendor %>" defer></script>
<script src="<%= files.app %>" defer></script>
</body>
</html>
After:
<% const {
title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
} = context.meta.inject() %><!DOCTYPE html>
<html n-head-ssr ${htmlAttrs.text()}>
<head>
${meta.text()}
${title.text()}
${link.text()}
${style.text()}
${script.text()}
${noscript.text()}
<base href="<%= baseUrl %>">
<% if (!dev) { %><style><%= files.css.CODE %></style><% } %>
</head>
<body ${bodyAttrs.text()}>
<%= APP %>
<script type="text/javascript" defer>window.__NUXT__=<%= serialize(context.nuxt) %></script>
<script><%= files.vendor.CODE %></script>
<script><%= files.app.CODE %></script>
</body>
</html>
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.