This tutorial explains how to create a NuxtJS application
How do I create a nuxt app?
Create nuxtjs app
npx nuxt-create-app nuxtapp
It asks for project name
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: (nuxtapp)
You can enter a new project name or click enter to consider the default project name
Next, It asks for a Programming language, Select Typescript
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language:
JavaScript
> TypeScript
Next, It asks for Package manager, Select the npm option
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: (Use arrow keys)
> Yarn
Npm
It asks for UI framework, and selects Bootstrap Vue
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: Npm
? UI framework:
None
Ant Design Vue
BalmUI
> Bootstrap Vue
Buefy
Chakra UI
Element
Oruga
Primevue
Tachyons
Tailwind CSS
Windi CSS
Vant
View UI
Vuetify.js
It asks for template engine, select HTML
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Template engine: (Use arrow keys)
> HTML
Pug
Select Nuxt.js modules that are required, Selected Axios
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Template engine: HTML
? Nuxt.js modules:
>(*) Axios - Promise based HTTP client
( ) Progressive Web App (PWA)
( ) Content - Git-based headless CMS
It asks for Lining tools, which are used to beautify the code and syntax-checking errors selected ESLint
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools:
>(*) ESLint
( ) Prettier
( ) Lint staged files
( ) StyleLint
( ) Commitlint
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: (Use arrow keys)
> None
Jest
AVA
WebdriverIO
Nightwatch
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: Jest
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
Single Page App
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
Static (Static/Jamstack hosting)
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: Jest
? Rendering mode: Single Page App
? 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)
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: (Use arrow keys)
> None
GitHub Actions (GitHub only)
Travis CI
CircleCI
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: (Use arrow keys)
> Git
None
A:\work>npx create-nuxt-app nuxtapp
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxtapp
? Project name: nuxtapp
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git
> [email protected] lintfix
> npm run lint:js -- --fix
> [email protected] lint:js
> eslint --ext ".js,.ts,.vue" --ignore-path .gitignore . --fix
🎉 Successfully created project nuxtapp
To get started:
cd nuxtapp
npm run dev
To build & start for production:
cd nuxtapp
npm run build
npm run start
To test:
cd nuxtapp
npm run test
For TypeScript users.
See : https://typescript.nuxtjs.org/cookbook/components/
Change directory
cd nuxtapp
NuxtJS application folder structure
Here is a complete directory structure of Nuxjs application.
| .babelrc
| .editorconfig
| .eslintrc.js
| .gitignore
| jest.config.js
| jsconfig.json
| nuxt.config.js
| package-lock.json
| package.json
| README.md
| tree.txt
| tsconfig.json
|
+---.nuxt
| | App.js
| | axios.js
| | bootstrap-vue.js
| | client.js
| | empty.js
| | index.js
| | jsonp.js
| | loading.html
| | middleware.js
| | router.js
| | router.scrollBehavior.js
| | routes.json
| | server.js
| | utils.js
| |
| +---components
| | index.js
| | nuxt-build-indicator.vue
| | nuxt-child.js
| | nuxt-error.vue
| | nuxt-link.client.js
| | nuxt-link.server.js
| | nuxt-loading.vue
| | nuxt.js
| | plugin.js
| | readme.md
| |
| +---layouts
| | default.vue
| |
| +---mixins
| | fetch.client.js
| | fetch.server.js
| |
| +---vetur
| | tags.json
| |
| \---views
| app.template.html
| error.html
|
+---components
| NuxtLogo.vue
| Tutorial.vue
|
+---dist
| | .nojekyll
| | 200.html
| | favicon.ico
| | index.html
| |
| \---_nuxt
| 031192e.js
| 65493bc.js
| 792b084.js
| ab15aab.js
| bea5142.js
| c2899fc.js
| eb74563.js
| LICENSES
|
+---node_modules
+---pages
| index.vue
|
+---static
| favicon.ico
|
+---store
| README.md
|
\---test
NuxtLogo.spec.js