Git Product home page Git Product logo

starter-template's Introduction

IMPORTANT: This template is deprecated

Please use create-nuxt-app to scaffold your Nuxt applications instead!

Starter

A Nuxt.js starter project template without the distraction of a complicated development environment.

Live demo: https://starter.nuxtjs.org

Prerequisites

Make sure to have node 8.0+ and npm 5.0+ installed

Installation

This is a project template for vue-cli.

$ vue init nuxt-community/starter-template my-project  
$ cd my-project                     
# install dependencies
$ npm install # Or yarn install

Make sure to use a version of vue-cli >= 2.1 (vue -V).

Usage

Development

# serve with hot reloading at localhost:3000
$ npm run dev

Go to http://localhost:3000

Production

# build for production and launch the server
$ npm run build
$ npm start

Generate

# generate a static project
$ npm run generate

starter-template's People

Contributors

0x307e avatar abetomo avatar alexchopin avatar antoine-brezillon avatar atinux avatar buhrmi avatar danielpost avatar limichange avatar lmj0011 avatar mannil avatar nicopennec avatar pi0 avatar potato4d avatar sewede avatar skasi avatar tabrizian avatar wulthan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

starter-template's Issues

when I run npm run dev show an error

E:\github\nuxtJs\node_modules\nuxt\lib\core\middleware\nuxt.js:72
      const policies = this.options.render.csp.policies ? {...this.options.rende
r.csp.policies} : null
                                                           ^^^

SyntaxError: Unexpected token ...
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (E:\github\nuxtJs\node_modules\nuxt\lib\core\renderer.
js:19:24)
This question is available on Nuxt.js community (#c39)

Browsersync

Hi,
Any chance browsersync could be added to the yarn run dev script to allow for easy mobile development etc. Cheers!

This question is available on Nuxt.js community (#c12)

dependency issue

Hi,

I'm getting the following error after updating to nuxt 1.0.0

This dependency was not found:
/.nuxt/client.js in multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

It seems it has something to do with the eslint-loader in the nuxt.config.js.
When i disable it, it does compile. It is still the default template:

            if (isDev && isClient) {
                config.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/
                })
            }
        }

Any idea what could be the issue here?

This question is available on Nuxt.js community (#c33)

Description should be escaped

For example I added a description of Twistly's Frontend which caused this in the nuxt.config.js.

{ hid: 'description', name: 'description', content: 'Twistly's Frontend' }
This question is available on Nuxt.js community (#c28)

Integration with Vue CLI 3

Hi! Since Vue CLI 3 is almost out, are there any plans on integrating Nuxt as part of vue create system? Or maybe there is already some kind of workflow we can use?

This question is available on Nuxt community (#c53)

Live eslint

Enhancement

Currently, the nuxt/starter doesn't have live eslint as seen with the vue-cli webpack template. I was able to implement something which provides this feature for the vue-cli nuxt/starter template

First install eslint-loader (all other packages are available in nuxt/starter)

npm i -D eslint-loader

Next, update the nuxt.config.js to include preLoaders (enforce: 'pre')

//nuxt.config.js
// in webpack2.2, we have enforce: 'pre' instead of preLoaders
...
build: {
    ...
    // EXTEND
    extend (config, { isClient }) {
      if (isClient) {
        config.module.rules.push({
            enforce: 'pre',
            test: /\.js$/,
            loader: 'eslint-loader',
            exclude: /(node_modules)/,
        },{
            enforce: 'pre',
            test: /\.vue$/,
            loader: 'eslint-loader',
            exclude: /(node_modules)/,
        })
      }
    }
  },
...

Now, you should have live eslint

Ref : nuxt/nuxt#212

This question is available on Nuxt.js community (#c5)

Error during running npm run dev in project

I started my first Nuxt project via:
$ vue init nuxt-community/starter-template nuxt-demo

then install the dependencies:
and launch the project with:
$ npm run dev

but the application can't get started with the following errors:

D:\demo\nuxt-ssr-demo\node_modules\nuxt\lib\core\module.js:14
async ready() {
^^^^^
SyntaxError: Unexpected identifier
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.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (D:\demo\nuxt-ssr-demo\node_modules\nuxt\lib\core\inde
x.js:2:16)
at Module._compile (module.js:571:32)

I don't know why. please help me fixed this problem, thx so much!

This question is available on Nuxt.js community (#c40)

"About" page error

Seems like the "about" page (though it's not referenced to anymore) uses an old data contract, expecting the context to be received. Probably, need to use asyncData instead of data to render things properly.

This question is available on Nuxt.js community (#c17)

Apostrophes in project description aren't supported

How to reproduce:

  1. Initialize a new project
    vue init nuxt-community/starter-template vue-personal-site

  2. Write product description with apostrophe
    ? Project description Dmitry Guryev's Personal Site

  3. Install modules, run the project
    npm run dev

  4. Get the error

○ → npm run dev

> [email protected] dev /Users/dguryev/xprojects/vue-personal-site
> nuxt

/Users/dguryev/xprojects/vue-personal-site/nuxt.config.js:10
      { hid: 'description', name: 'description', content: 'Dmitry Guryev's Personal Site' }
                                                                         ^

SyntaxError: Unexpected identifier
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at loadNuxtConfig (/Users/dguryev/xprojects/vue-personal-site/node_modules/nuxt/bin/nuxt-dev:150:15)
    at Object.<anonymous> (/Users/dguryev/xprojects/vue-personal-site/node_modules/nuxt/bin/nuxt-dev:63:20)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)

Solution: escape project name string in nuxt.config.js

This question is available on Nuxt.js community (#c38)

HTML minification failed when you use '<3'

⫸ vue init nuxt-community/starter-template my-project5

? Project name my-project5
? Project description Nuxt.js project
? Author Matej Nemcek [email protected]
⫸ cd my-project5/
⫸ npm i
⫸ nano pages/index.vue
add there & save

<h2 class="subtitle">
        Nuxt.js project <3
      </h2>

important is <3

⫸  npm run generate

> [email protected] generate /Users/wao/Lab/my-project5
> nuxt generate

  nuxt:generate Generating... +0ms
  nuxt:build App root: /Users/wao/Lab/my-project5 +11ms
  nuxt:build Generating /Users/wao/Lab/my-project5/.nuxt files... +1ms
  nuxt:build Generating files... +4ms
  nuxt:build Generating routes... +6ms
  nuxt:build Building files... +32ms
Build completed in 9.81s

Hash: 4a239bda8af56836cc08
Version: webpack 3.4.1
Time: 9816ms
                                    Asset       Size  Chunks             Chunk Names
1.nuxt.bundle.5eafb0451c075ef76c54.js.map    1.69 kB       1  [emitted]  layouts/default
    0.nuxt.bundle.0a62bbba6a9a5b4d140a.js    7.79 kB       0  [emitted]  pages/index
    vendor.bundle.a4a5870e2d91a576147c.js     145 kB       2  [emitted]  vendor
      nuxt.bundle.898b0a05415ed638f08d.js    25.3 kB       3  [emitted]  app
         manifest.4a239bda8af56836cc08.js    1.54 kB       4  [emitted]  manifest
0.nuxt.bundle.0a62bbba6a9a5b4d140a.js.map    3.76 kB       0  [emitted]  pages/index
    1.nuxt.bundle.5eafb0451c075ef76c54.js    2.95 kB       1  [emitted]  layouts/default
vendor.bundle.a4a5870e2d91a576147c.js.map     231 kB       2  [emitted]  vendor
  nuxt.bundle.898b0a05415ed638f08d.js.map    40.5 kB       3  [emitted]  app
     manifest.4a239bda8af56836cc08.js.map    2.81 kB       4  [emitted]  manifest
                           index.ssr.html  132 bytes          [emitted]
                           index.spa.html  398 bytes          [emitted]
             vue-ssr-client-manifest.json    7.45 kB          [emitted]
Hash: 33154686e9f0a9170b51
Version: webpack 3.4.1
Time: 9800ms
             Asset    Size  Chunks             Chunk Names
server-bundle.json  242 kB          [emitted]
  nuxt:generate Destination folder cleaned +10s
  nuxt:generate Static & build files copied +15ms
Generating routes
  nuxt:render Rendering url / +4ms
  nuxt:generate Generate file: /index.html +118ms
  nuxt:generate HTML Files generated in 10.2s +0ms
==== Error report ====
Route: '/'
Error: HTML minification failed. Make sure the route generates valid HTML. Failed HTML:
 <!DOCTYPE html>
<html data-n-head-ssr data-n-head="">
  <head>
    <meta data-n-head="true" charset="utf-8"/><meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-n-head="true" data-hid="description" name="description" content="Nuxt.js project"/><title data-n-head="true">my-project5</title><link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico"/><link rel="preload" href="/_nuxt/manifest.4a239bda8af56836cc08.js" as="script"><link rel="preload" href="/_nuxt/vendor.bundle.a4a5870e2d91a576147c.js" as="script"><link rel="preload" href="/_nuxt/nuxt.bundle.898b0a05415ed638f08d.js" as="script"><link rel="preload" href="/_nuxt/1.nuxt.bundle.5eafb0451c075ef76c54.js" as="script"><link rel="preload" href="/_nuxt/0.nuxt.bundle.0a62bbba6a9a5b4d140a.js" as="script"><style data-vue-ssr-id="49020bdc:0 01b78770:0 2fbab843:0 c8fee4cc:0">.progress[data-v-3bea9706]{position:fixed;top:0;left:0;right:0;height:2px;width:0;-webkit-transition:width .2s,opacity .4s;-o-transition:width .2s,opacity .4s;transition:width .2s,opacity .4s;opacity:1;background-color:#efc14e;z-index:999999}
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:100%;-webkit-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}*,:after,:before,html{-webkit-box-sizing:border-box;box-sizing:border-box}*,:after,:before{margin:0}.button--green{display:inline-block;border-radius:4px;border:1px solid #3b8070;color:#3b8070;text-decoration:none;padding:10px 30px}.button--green:hover{color:#fff;background-color:#3b8070}.button--grey{display:inline-block;border-radius:4px;border:1px solid #35495e;color:#35495e;text-decoration:none;padding:10px 30px;margin-left:15px}.button--grey:hover{color:#fff;background-color:#35495e}
.container{min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center}.title{font-family:Quicksand,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;display:block;font-weight:300;font-size:100px;color:#35495e;letter-spacing:1px}.subtitle{font-weight:300;font-size:42px;color:#526488;word-spacing:5px;padding-bottom:15px}.links{padding-top:15px}
.VueToNuxtLogo{display:inline-block;-webkit-animation:turn 2s linear forwards 1s;animation:turn 2s linear forwards 1s;-webkit-transform:rotateX(180deg);transform:rotateX(180deg);position:relative;overflow:hidden;height:180px;width:245px}.Triangle{position:absolute;top:0;left:0;width:0;height:0}.Triangle--one{border-left:105px solid transparent;border-right:105px solid transparent;border-bottom:180px solid #41b883}.Triangle--two{top:30px;border-left:87.5px solid transparent;border-right:87.5px solid transparent;border-bottom:150px solid #3b8070}.Triangle--three,.Triangle--two{left:35px;-webkit-animation:goright .5s linear forwards 3.5s;animation:goright .5s linear forwards 3.5s}.Triangle--three{top:60px;border-left:70px solid transparent;border-right:70px solid transparent;border-bottom:120px solid #35495e}.Triangle--four{top:120px;left:70px;-webkit-animation:godown .5s linear forwards 3s;animation:godown .5s linear forwards 3s;border-left:35px solid transparent;border-right:35px solid transparent;border-bottom:60px solid #fff}@-webkit-keyframes turn{to{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@keyframes turn{to{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@-webkit-keyframes godown{to{top:180px}}@keyframes godown{to{top:180px}}@-webkit-keyframes goright{to{left:70px}}@keyframes goright{to{left:70px}}</style>
  </head>
  <body data-n-head="">
    <div id="__nuxt" data-server-rendered="true"><div class="progress" style="width:0%;height:2px;background-color:#3B8070;opacity:0;" data-v-3bea9706></div><div><section class="container"><div><div class="VueToNuxtLogo"><div class="Triangle Triangle--two"></div><div class="Triangle Triangle--one"></div><div class="Triangle Triangle--three"></div><div class="Triangle Triangle--four"></div></div><h1 class="title">
      my-project5
    </h1><h2 class="subtitle">
      Nuxt.js project <3
    </h2><div class="links"><a href="https://nuxtjs.org/" target="_blank" class="button--green">Documentation</a><a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">GitHub</a></div></div></section></div></div><script type="text/javascript">window.__NUXT__={"layout":"default","data":[{}],"error":null,"state":{},"serverRendered":true};</script><script src="/_nuxt/manifest.4a239bda8af56836cc08.js" defer></script><script src="/_nuxt/1.nuxt.bundle.5eafb0451c075ef76c54.js" defer></script><script src="/_nuxt/0.nuxt.bundle.0a62bbba6a9a5b4d140a.js" defer></script><script src="/_nuxt/vendor.bundle.a4a5870e2d91a576147c.js" defer></script><script src="/_nuxt/nuxt.bundle.898b0a05415ed638f08d.js" defer></script>
  </body>
</html>

    at Generator._callee4$ (/Users/wao/Lab/my-project5/node_modules/nuxt/lib/builder/generator.js:153:27)
    at tryCatch (/Users/wao/Lab/my-project5/node_modules/nuxt/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/Users/wao/Lab/my-project5/node_modules/nuxt/node_modules/regenerator-runtime/runtime.js:303:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/wao/Lab/my-project5/node_modules/nuxt/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/Users/wao/Lab/my-project5/node_modules/nuxt/dist/nuxt.js:852:30)
    at /Users/wao/Lab/my-project5/node_modules/nuxt/dist/nuxt.js:863:13
  nuxt:generate Generate done +17ms

nuxt version is 1.0.0-rc3

This question is available on Nuxt.js community (#c18)

Integrating 3rd Pary Libraries

Question

Hi @Atinux, i'm trying to integrate some external js libraries with my nuxt-project. These libraries are referencing the window Object and this object doesn't exist on the server side. I think this is the reason, its throwing an error

window_not_defined

Please let me know how I can handle such integration.

Thanks.

This question is available on Nuxt.js community (#c7)

Error when starting without editing any files.

Greetings,

I receive the following error just after running the following commands :
vue init nuxt/starter
yarn
npm run dev

vue.runtime.common.js:519[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 
This bug report is available on Nuxt.js community (#c1)

Progress bar config

Hello @Atinux, if possible, please clarify this issue. Maybe i'm doing something wrong due to which the progress bar is persistent even when i'm setting loading: false.

Though i have set the loading: false as mentioned here the progress bar is still visible on the webapp.

image

image

Please suggest what can be done to avoid the progress bar in the app.

This question is available on Nuxt.js community (#c6)

static pages generated don't work

It is normal when I use npm run dev or npm run build and npm run start, but it's abnormal when I use npm generate to generate static pages. The page appear and disappear quickly just leaving the footer.
Did I do something wrong or it's a bug.

This bug report is available on Nuxt.js community (#c4)

Can't use CSS files in new project

Edit
Forgot this one was an issue with nuxt and postcss-loader itself. here's the ref

Started clean project from template, added a css file in @assets that contains the following:

body, html {
  margin: 0;
  padding: 0;
}

When I add the css file to nuxt.config.js, i get the following error:

ERROR  Failed to compile with 1 errors                                 7:00:31

 error  in ./assets/main.css

Module build failed: ValidationError: PostCSS Loader Invalid Options

options['useConfigFile'] is an invalid additional property


 @ ./assets/main.css 4:14-137 13:3-17:5 14:22-145
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

  nuxt: Call close hooks (2) +1s
  nuxt: server closed +0ms

nuxt.config.js:

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'spa_demo',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'SPA demo' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },
  css: [
    '@/assets/main.css'
  ]
}
This question is available on Nuxt.js community (#c37)

npm run dev fails on blank project

Hey Guys,

I was just trying out the starter-template today and it doesn't seem to work for me. Not sure if this is specific to my setup, but it used to work.

When I run npm run dev I get this

/.../node_modules/nuxt/bin/nuxt-dev:11
const { Nuxt, Builder } = require('../')
      ^

SyntaxError: Unexpected token {

Seems like it might be something to do with babel?

This question is available on Nuxt.js community (#c13)

error in start template

just as normal step to init my project
$ vue init nuxt-community/starter-template test-nuxt
$ cd test-nuxt
$ npm install
$ npm run dev

then the error is:

> [email protected] dev /home/wi/bin/test-nuxt
> nuxt

  nuxt:build App root: /home/wi/bin/test-nuxt +0ms
  nuxt:build Generating /home/wi/bin/test-nuxt/.nuxt files... +1ms
  nuxt:build Generating files... +7ms
  nuxt:build Generating routes... +5ms
  nuxt:build Building files... +25ms
  nuxt:build Adding webpack middleware... +135ms
  build [==                  ] 10%Error: watch /home/wi/bin/test-nuxt/pages ENOSPC
    at exports._errnoException (util.js:1026:11)
    at FSWatcher.start (fs.js:1297:19)
    at Object.fs.watch (fs.js:1322:11)
    at createFsWatchInstance (/home/wi/bin/test-nuxt/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (/home/wi/bin/test-nuxt/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/wi/bin/test-nuxt/node_modules/chokidar/lib/nodefs-handler.js:228:14)
    at FSWatcher.NodeFsHandler._handleDir (/home/wi/bin/test-nuxt/node_modules/chokidar/lib/nodefs-handler.js:407:19)
    at FSWatcher.<anonymous> (/home/wi/bin/test-nuxt/node_modules/chokidar/lib/nodefs-handler.js:455:19)
    at FSWatcher.<anonymous> (/home/wi/bin/test-nuxt/node_modules/chokidar/lib/nodefs-handler.js:460:16)
    at FSReqWrap.oncomplete (fs.js:111:15)
This question is available on Nuxt.js community (#c23)

yarn run dev bombs when adding CSS

Adding Bootstrap and a Google font to the nuxt.config.js causes the dev build to bomb.

{ rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'},
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Work+Sans:400,700,900' }

Error is

* ... in ./~/nuxt/~/vue-loader/lib/template-compiler?{"id":"data-v-5d918b31","preserveWhitespace":false}!./~/nuxt/~/vue-loader/lib/selector.js?type=template&index=0!./pages/index.vue

even though I added vue-loader as a dependency.

Any ideas why?

This question is available on Nuxt.js community (#c16)

BeforeMount function is executing **before** page transition too...

@Atinux, if possible, please look into this. I don't know if it is a bug or it is working as expected.

# Issue

Every time we transition to a page under a different layout the beforeMount function for the **from page** is executed (even though its being destroyed/unmounted)

This doesn't occur when moving within pages under the same layout.

# Isolating this issue

  • Create two layouts - default and other
  • Create two pages - pages/index.vue and pages/about/index.vue
  • Set layout: 'other' on the pages/about/index.vue page
  • Add beforeMount event function to both the pages with console.log('Before mounting :pageName page')

That's it. Now when you go from pages/index.vue to pages/about/index.vue, you'll notice in the console.log >> Before mounting home page

# Issue isolated here:

app-sparkler/nuxt-starter >> issue-branch

*checkout issue-branch after cloning the repo.

// CLONE app-sparkler/nuxt-starter
$ git clone https://github.com/app-sparkler/nuxt-starter

// CHECKOUT issue-branch
$ git checkout issue-branch

// INSTALL with yarn or npm
$ yarn install
OR
$ npm install

// RUN dev server
$ npm run dev

Thanks,
Akash

This question is available on Nuxt.js community (#c8)

Optional ES Lint?

I wanted to try Nuxt out for a project, so I went with the starter template to get up & running fast.

Unfortunately, "fast" prototyping went out the window because ES Lint kept getting on to me about spaces and formatting. We could all stand to code a little cleaner, but the configuration meant that I couldn't get my code running until I formatted it how ES Lint demanded.

Not knowing enough about ES Lint to be able to disable it effectively and unable to find any information in the docs regarding it, I had to abandon using Nuxt in the interest of saving time to get something deployed.

Digging into it more now, I see that I probably could've removed the ES lint part of the nuxt.config.js, but none of this was really clear in my first introduction to Nuxt.

I'm also aware of the /* eslint-disable */ comment option, but that had to be done in every file.

Ideally there should be a configuration option (just like in the Vue webpack template) to add ES Lint so Nuxt can be easily up & running without an ES Lint requirement.

Alternatively, some documentation on how to disable ES lint would be helpful!

This feature request is available on Nuxt.js community (#c27)

new version nuxt

hello, how update template that i use new version nuxt? in npm install nuxt 1.0.0

This question is available on Nuxt.js community (#c41)

Lint does not run on save automatically.

Version

nuxt-edge

Reproduction link

https://github.com/unr/eslint-error-example

Steps to reproduce

  • create a starter template project
  • cause an eslint error (disable tabs, add tabs)
  • error shown when running npm run lint
  • error never shown when running npm run dev, saving a file, or reloading page.

In my repo, I'm working with nuxt-edge as well, though this seems to cause no difference. Error occurs on 1.4.0 nuxt
eslint-fail.png

What is expected ?

Eslint should run via eslint-loader on file save, reporting vue & js linting errors.

What is actually happening?

Lint can be manually run, doesn't run automatically.

Additional comments?

This used to work previously, and I've tried multiple types of setting up eslint-loader. None seem to work.

This bug report is available on Nuxt.js community (#c42)

Error with Nuxt 1.0.0-rc2

I'm having an error message after running a fresh installation using Nuxt/starter

ERROR  Failed to compile with 1 errors                                                                                              23:08:12

This dependency was not found:

* ~components/Logo.vue in ./node_modules/babel-loader/lib?{"presets":["vue-app"],"babelrc":false,"cacheDirectory":true}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue

I have another project It was running fine until I ran yarn upgrade
Nuxt 1.0.0-rc2 causes the same error

Full output:

MisProyectos|⇒ vue init nuxt-community/starter-template prueba-nuxt

? Project name prueba-nuxt
? Project description Nuxt.js project
? Author vladzur <[email protected]>

   vue-cli · Generated "prueba-nuxt".

   To get started:
   
     cd prueba-nuxt
     npm install # Or yarn
     npm run dev

MisProyectos|⇒ cd prueba-nuxt 
prueba-nuxt|⇒ yarn
yarn install v0.27.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 68.41s.
prueba-nuxt|⇒ yarn run dev
yarn run v0.27.5
$ nuxt
  nuxt:build App root: /home/vladzur/MisProyectos/prueba-nuxt +0ms
  nuxt:build Generating /home/vladzur/MisProyectos/prueba-nuxt/.nuxt files... +3ms
  nuxt:build Generating files... +10ms
  nuxt:build Generating routes... +33ms
  nuxt:build Building files... +49ms
  nuxt:build Adding webpack middleware... +278ms
Build completed in 9.36s



 ERROR  Failed to compile with 1 errors                                                                                              23:44:10

This dependency was not found:

* ~components/Logo.vue in ./node_modules/babel-loader/lib?{"presets":["vue-app"],"babelrc":false,"cacheDirectory":true}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue

To install it, you can run: npm install --save ~components/Logo.vue
This question is available on Nuxt.js community (#c11)

Support separate dev and production config

As original Vue.js build file is separate between development and production. Can we do in in nuxt.js template?

Solution

  • Create 2 config file dev and production
  • import 2 file in nuxt.config.js
  • use merge to combine config follow env
This question is available on Nuxt.js community (#c22)

when I run npm run dev show an error

Error: listen EADDRNOTAVAIL 172.0.0.1:3000
at Object.exports._errnoException (util.js:1050:11) at exports._exceptionWithHostPort (util.js:1073:20) at Server.setupListenHandle [as _listen2] (net.js:1243:19) at listenInCluster (net.js:1307:12) at doListen (net.js:1432:7) at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16) at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:78:10)

what should I do ?

This question is available on Nuxt.js community (#c24)

Can't do nothing with starter template

Version

1

Reproduction link

https://nuxtjs.org/guide/installation

Steps to reproduce

Follow the steps from https://nuxtjs.org/guide/installation, section Using Nuxt.js starter template.

What is expected ?

Successfully run template

What is actually happening?

E:\TestProjects\vuenuxt\my-test-project\node_modules\nuxt\lib\core\module.js:14
async ready() {
^^^^^
SyntaxError: Unexpected identifier
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.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (E:\TestProjects\vuenuxt\my-test-project\node_modules\nuxt\lib\core\index.js:2:16)
at Module._compile (module.js:571:32)

npm ERR! Windows_NT 10.0.16299
npm ERR! argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev"
npm ERR! node v7.4.0
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: nuxt
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'nuxt'.
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 my-test-project 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 my-test-project
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls my-test-project
npm ERR! There is likely additional logging output above.

Additional comments?

My OS is Windows 10.

This bug report is available on Nuxt.js community (#c43)

Nuxt-Community Starter Template Fails to Build

Version

1

Reproduction link

https://cl.ly/rr5G

Steps to reproduce

Using node 8.11.2, literally just follow the instructions in the installation guide (https://nuxtjs.org/guide/installation):

  1. vue init nuxt-community/starter-template
  2. cd
  3. npm install
  4. npm run dev

Bam. Errors. Won't load in browser.

What is expected ?

It should build without errors and serve me the default start page at http://localhost:3000

What is actually happening?

I get several build errors stating "Module build failed: Error: No parser and no file path given, couldn't infer a parser" and the site won't load.

Additional comments?

This starter template is surprisingly old considering how much activity has happened with both Nuxt and Vue over that same span of time, particularly with vue-clie@3. I might be speaking out of line, but does this thing need to be updated?

This bug report is available on Nuxt.js community (#c51)

Npm run build breaks on Windows 10

Hello,

I cloned the starter git, run npm install and dev just fine. The project works exactly like the demo.
When I try the npm run build command I get this error

ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":0,"remove":true}!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-121a11e9!./assets/css/main.css

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (C:\node\nu\node_modules\extract-text-webpack-plugin\loader.js:26:9)
 @ ./.nuxt/App.vue 3:0-192
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js

This error appear 6 times on different areas of the project.
Why does this error appear? I try to see the if extract-text-webpack-plugin is called anywhere in the project, but I can't seem to find it. I have not edit any code, this happen to me with the cloned template.

I noticed that on the package.json the extract-text-webpack-plugin is not installed so I installed it as a dependency, but the error persists.

Any help is appreciated.

OS: Windows 10
node: 7.4.0
npm: 4.1.2

This question is available on Nuxt.js community (#c14)

Get Authentication by Django POST API

How can I get Authentication, Storage Sessions with Django API by POST?
This example https://nuxtjs.org/examples/auth-routes cant help me. It's logged in success but when reload page it not logged in anymore.

Action Store Login

async login ({ commit }, { username, password }) { try { const { data } = await **axios.post('http://localhost:8000/api/v1/api-token-auth/login'**, { username, password }) commit('SET_USER', data) } catch (error) { if (error.response && error.response.status === 401) { throw new Error('Bad credentials') } throw error } },
ServerMiddleware auth.js
router.post('/login', (req, res) => { if (req.body.username && req.body.username == req.body.password) { req.session.authUser = { username } return res.json({ username }) } res.status(401).json({ message: 'Wrong username or Password. Please try again!' }) })

Please help. Thanks in advance

This question is available on Nuxt.js community (#c21)

Updating the used template later

I started a test nuxt project some weeks ago. Run into some issues and discovered that my nuxt version is quite old (nuxt 1.0.0-alpha.5).

Question: is there a way to update the nuxt version of current project?

This question is available on Nuxt.js community (#c19)

Typing in page url does not work

Typing in the direct url of a page or section of the website does not work. When I try this I get sent to the homepage but without any of my data loaded from my async calls. It works fine in dev setup, but when I push the site live on static hosting I run into this problem

Is there any way to enable direct links so users can navigate to different sections of the website without going to the homepage first?

This question is available on Nuxt.js community (#c26)

error threw on run dev or build

It is just a suggestion to add info to the requirements list : node > 8.1.1

It does not work on
npm : 5.6.0
vue: 2.9.2
node: 7.10
Win: 10

const glob = promisify(Glob)
             ^

TypeError: promisify is not a function
    at Object.<anonymous> (C:\Users\AdamSurface\Source\Repos\ninext\node_modules\nuxt\lib\builder\builder.js:32:14)
    at Module._compile (module.js:571:32)
    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.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\AdamSurface\Source\Repos\ninext\node_modules\nuxt\lib\builder\index.js:1:79)
    at Module._compile (module.js:571:32)
    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.require (module.js:498:17)
    at require (internal/module.js:20:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
This question is available on Nuxt.js community (#c36)

when I exec the command line 'npm run dev', it occurs some error.My vue version is 2.8.3 and node version is v7.5.0

node_modules_nuxt@1.3.0@nuxt\lib\core\module.js:14
async ready() {
^^^^^
SyntaxError: Unexpected identifier
at Object.exports.runInThisContext (vm.js:73: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.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (D:\learning\vue\my-nuxt-project\node_modules_nuxt@1.3.0@nuxt\lib\core\index.js:2:16)
at Module._compile (module.js:571:32)

This question is available on Nuxt.js community (#c32)

I get ERROR Failed to compile with 5 errors after clear installation. 02:06:18

It's the first time I try to install nuxt, I just followed the docs:

  • vue init nuxt-community/starter-template test
  • cd test
  • yarn install
  • yarn run dev

My node version is v8.4.0

I get this error:

 ERROR  Failed to compile with 5 errors                                                                                               02:20:24

 error  in ./.nuxt/components/nuxt-error.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at normalize (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:7051:13)
    at formatWithCursor (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:10370:12)
    at /home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:31115:15
    at Object.format (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:31134:12)
    at Object.module.exports (/home/achilleskal/Projects/vue/test/node_modules/vue-loader/lib/template-compiler/index.js:80:23)

 @ ./.nuxt/components/nuxt-error.vue 11:0-379
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./.nuxt/components/nuxt-loading.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at normalize (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:7051:13)
    at formatWithCursor (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:10370:12)
    at /home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:31115:15
    at Object.format (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:31134:12)
    at Object.module.exports (/home/achilleskal/Projects/vue/test/node_modules/vue-loader/lib/template-compiler/index.js:80:23)

 @ ./.nuxt/components/nuxt-loading.vue 11:0-381
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./pages/index.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at normalize (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:7051:13)
    at formatWithCursor (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:10370:12)
    at /home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:31115:15
    at Object.format (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:31134:12)
    at Object.module.exports (/home/achilleskal/Projects/vue/test/node_modules/vue-loader/lib/template-compiler/index.js:80:23)

 @ ./pages/index.vue 11:0-368
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./layouts/default.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at normalize (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:7051:13)
    at formatWithCursor (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:10370:12)
    at /home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:31115:15
    at Object.format (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:31134:12)
    at Object.module.exports (/home/achilleskal/Projects/vue/test/node_modules/vue-loader/lib/template-compiler/index.js:80:23)

 @ ./layouts/default.vue 10:0-370
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

 error  in ./components/AppLogo.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at normalize (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:7051:13)
    at formatWithCursor (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:10370:12)
    at /home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:31115:15
    at Object.format (/home/achilleskal/Projects/vue/test/node_modules/prettier/index.js:31134:12)
    at Object.module.exports (/home/achilleskal/Projects/vue/test/node_modules/vue-loader/lib/template-compiler/index.js:80:23)

 @ ./components/AppLogo.vue 10:0-370
 @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["/home/achilleskal/Projects/vue/test/node_modules/babel-preset-vue-app/dist/index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

This question is available on Nuxt.js community (#c50)

Same port error ('EADDRINUSE') when running multiple projects

Version

starter-template

Reproduction link

NA

Steps to reproduce

create first project with vue-cli, install packages, and run dev
create second project with vue-cli, install packages, and run dev

What is expected?

Both projects should be ran without error

What is actually happening?

Same port error, 'Error: listen EADDRINUSE 127.0.0.1:3000'

1st project occupies port, while 2nd project attempts to connect to same one

Additional comments?

This could be solved manually, though it is tedious. In previous versions of Vue, etc., ports are reconfigured automatically.

This question is available on Nuxt.js community (#c44)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.