NuxtJS lesson 1: Installation


Requirements

NodeJS >= v10.13
IDE: recommend VSCode with the Vetur extension or WebStorm

Create a new project using create-nuxt-app

Install package create-nuxt-app

D:\Nuxt>npm i create-nuxt-app
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#dep
recated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprec
ated

> ejs@2.7.4 postinstall D:\Nuxt\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https:/
/jakejs.com/)

npm WARN saveError ENOENT: no such file or directory, open 'D:\Nuxt\package.json
'
npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN enoent ENOENT: no such file or directory, open 'D:\Nuxt\package.json'
npm WARN Nuxt No description
npm WARN Nuxt No repository field.
npm WARN Nuxt No README data
npm WARN Nuxt No license field.

+ create-nuxt-app@3.4.0
added 382 packages from 199 contributors and audited 382 packages in 100.512s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Create new project

npx create-nuxt-app <project-name>

Example:

D:\Nuxt>npx create-nuxt-app demo

create-nuxt-app v3.4.0
?  Generating Nuxt.js project in demo
? Project name: demo
? Programming language: TypeScript
? Package manager: Npm
? UI framework: (Use arrow keys)
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Chakra UI
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js
? UI framework: Bootstrap Vue
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert se

lection)
>( ) Axios
 ( ) Progressive Web App (PWA)
 ( ) Content
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert se

lection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele

ction)
>( ) ESLint
 ( ) Prettier
 ( ) Lint staged files
 ( ) StyleLint
 ( ) Commitlint
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert sele

ction)
? Testing framework: (Use arrow keys)
> None
  Jest
  AVA
  WebdriverIO
? Testing framework: Jest
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App
? Rendering mode: Universal (SSR / SSG)
? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
  Static (Static/JAMStack hosting)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert

selection)
>( ) jsconfig.json (Recommended for VS Code if you're not using typescript)
 ( ) Semantic Pull Requests
 ( ) Dependabot (For auto-updating dependencies, GitHub only)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert

selection)
? Continuous integration: (Use arrow keys)
> None
  GitHub Actions (GitHub only)
? Continuous integration: None
? Version control system: (Use arrow keys)
> Git
  None
? Version control system: None
/ Installing packages with npm
...
> deasync@0.1.21 install D:\Nuxt\demo\node_modules\deasync
> node ./build.js

`win32-x64-node-14` exists; testing
Binary is fine; exiting

> core-js@2.6.12 postinstall D:\Nuxt\demo\node_modules\@nuxt\babel-preset-app\n
ode_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfil
ling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Coll
ective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a go
od job -)


> core-js@2.6.12 postinstall D:\Nuxt\demo\node_modules\babel-runtime\node_modul
es\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\Nuxt\demo\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https:
//jakejs.com/)


> bootstrap-vue@2.19.0 postinstall D:\Nuxt\demo\node_modules\bootstrap-vue
> opencollective || exit 0


                           ;iiiiiiiiiiSSSSSSSSiiiiiiiiii;
                           .rXXXXXXXXXrrrrrrrSXXXXXXXXXr.
                           :iXXXXXXXX2. ;;;;, r3XXXXXXXi;
                          ,rSSSSSXXXX2..sSSi: r3XXXSSSSSr,
                           ,siiiiS2XX2. :;;:,.rXX2Siiiis,
                            ,riiiii2X2..5XXXi .22iiiiir,
                             .riiiii22..::::,,r2iiiiir.
                              .riiiii5SSiiiiS22iiiiir.
                                ;iiiii5X3333X5iiiii;
                                 :iiiiiSXXXXSiiiii:
                                  :siiiiSXXSiiiis:
                                   ,siiiiiiiiiis,
                                    .riiiiiiiir.
                                     .riiiiiir.
                                      .;iiii;.
                                        ;ii;
                                         ::

                        Thanks for installing bootstrap-vue
                  Please consider donating to our open collective
                         to help us maintain this package.

                             Number of contributors: 0
                               Number of backers: 187
                               Annual budget: $11,587
                              Current balance: $6,579

           Donate: https://opencollective.com/bootstrap-vue/donate


> core-js@3.8.0 postinstall D:\Nuxt\demo\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> nuxt@2.14.7 postinstall D:\Nuxt\demo\node_modules\nuxt
> opencollective || exit 0


                                      :-:
                                    .==-+:

> deasync@0.1.21 install D:\Nuxt\demo\node_modules\deasync
> node ./build.js

`win32-x64-node-14` exists; testing
Binary is fine; exiting

> core-js@2.6.12 postinstall D:\Nuxt\demo\node_modules\@nuxt\babel-preset-app\n
ode_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfil
ling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Coll
ective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a go
od job -)


> core-js@2.6.12 postinstall D:\Nuxt\demo\node_modules\babel-runtime\node_modul
es\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\Nuxt\demo\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https:
//jakejs.com/)


> bootstrap-vue@2.19.0 postinstall D:\Nuxt\demo\node_modules\bootstrap-vue
> opencollective || exit 0


                           ;iiiiiiiiiiSSSSSSSSiiiiiiiiii;
                           .rXXXXXXXXXrrrrrrrSXXXXXXXXXr.
                           :iXXXXXXXX2. ;;;;, r3XXXXXXXi;
                          ,rSSSSSXXXX2..sSSi: r3XXXSSSSSr,
                           ,siiiiS2XX2. :;;:,.rXX2Siiiis,
                            ,riiiii2X2..5XXXi .22iiiiir,
                             .riiiii22..::::,,r2iiiiir.
                              .riiiii5SSiiiiS22iiiiir.
                                ;iiiii5X3333X5iiiii;
                                 :iiiiiSXXXXSiiiii:
                                  :siiiiSXXSiiiis:
                                   ,siiiiiiiiiis,
                                    .riiiiiiiir.
                                     .riiiiiir.
                                      .;iiii;.
                                        ;ii;
                                         ::

                        Thanks for installing bootstrap-vue
                  Please consider donating to our open collective
                         to help us maintain this package.

                             Number of contributors: 0
                               Number of backers: 187
                               Annual budget: $11,587
                              Current balance: $6,579

           Donate: https://opencollective.com/bootstrap-vue/donate


> core-js@3.8.0 postinstall D:\Nuxt\demo\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> nuxt@2.14.7 postinstall D:\Nuxt\demo\node_modules\nuxt
> opencollective || exit 0


                                      :-:
                                    .==-+:
                                   .==. :+- .-=-
                                  .==.   :==++-+=.
                                 :==.     -**: :+=.
                                :+-      :*+++. .++.

> deasync@0.1.21 install D:\Nuxt\demo\node_modules\deasync
> node ./build.js

`win32-x64-node-14` exists; testing
Binary is fine; exiting

> core-js@2.6.12 postinstall D:\Nuxt\demo\node_modules\@nuxt\babel-preset-app\n
ode_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfil
ling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Coll
ective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a go
od job -)


> core-js@2.6.12 postinstall D:\Nuxt\demo\node_modules\babel-runtime\node_modul
es\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\Nuxt\demo\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https:
//jakejs.com/)


> bootstrap-vue@2.19.0 postinstall D:\Nuxt\demo\node_modules\bootstrap-vue
> opencollective || exit 0


                           ;iiiiiiiiiiSSSSSSSSiiiiiiiiii;
                           .rXXXXXXXXXrrrrrrrSXXXXXXXXXr.
                           :iXXXXXXXX2. ;;;;, r3XXXXXXXi;
                          ,rSSSSSXXXX2..sSSi: r3XXXSSSSSr,
                           ,siiiiS2XX2. :;;:,.rXX2Siiiis,
                            ,riiiii2X2..5XXXi .22iiiiir,
                             .riiiii22..::::,,r2iiiiir.
                              .riiiii5SSiiiiS22iiiiir.
                                ;iiiii5X3333X5iiiii;
                                 :iiiiiSXXXXSiiiii:
                                  :siiiiSXXSiiiis:
                                   ,siiiiiiiiiis,
                                    .riiiiiiiir.
                                     .riiiiiir.
                                      .;iiii;.
                                        ;ii;
                                         ::

                        Thanks for installing bootstrap-vue
                  Please consider donating to our open collective
                         to help us maintain this package.

                             Number of contributors: 0
                               Number of backers: 187
                               Annual budget: $11,587
                              Current balance: $6,579

           Donate: https://opencollective.com/bootstrap-vue/donate


> core-js@3.8.0 postinstall D:\Nuxt\demo\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> nuxt@2.14.7 postinstall D:\Nuxt\demo\node_modules\nuxt
> opencollective || exit 0


                                      :-:
                                    .==-+:
                                   .==. :+- .-=-
                                  .==.   :==++-+=.
                                 :==.     -**: :+=.
                                :+-      :*+++. .++.
                               :+-      -*= .++: .=+.
                              -+:      =*-   .+*: .=+:

?  Successfully created project demo

  To get started:

        cd demo
        npm run dev

  To build & start for production:

        cd demo
        npm run build
        npm run start

  To test:

        cd demo
        npm run test


  For TypeScript users.

  See : https://typescript.nuxtjs.org/cookbook/components/

Start the project

cd <project-name>
npm run dev

Example:

D:\Nuxt>cd demo

D:\Nuxt\demo>npm run dev

> demo@1.0.0 dev D:\Nuxt\demo
> nuxt-ts


i NuxtJS collects completely anonymous data about usage.              20:39:44
  This will help us improving Nuxt developer experience over the time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participation? (Y/n)
? Are you interested in participation? Yes


   ?───────────────────────────────────────?
   │                                       │
   │   Nuxt.js @ v2.14.7                   │
   │                                       │
   │   ? Environment: development          │
   │   ? Rendering:   server-side          │
   │   ? Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ?───────────────────────────────────────?

i Preparing project for development                                   20:42:30
i Initial build may take a while                                      20:42:30
√ Builder initialized                                                 20:42:30
√ Nuxt files generated                                                20:42:30

√ Client
  Compiled successfully in 13.22s

√ Server
  Compiled successfully in 10.83s

i Waiting for file changes                                            20:42:45
i Memory usage: 272 MB (RSS: 367 MB)                                  20:42:45
i Listening on: http://localhost:3000/                                20:42:45
No issues found.                                                      20:42:45

Done! Now you can access your project on http://localhost:3000/

Leave a Reply