넉스트 / auto route routing / vue-route / 라우팅 /hello world

Nuxt 의 Routing 사용해보기

nuxt 가 자동으로 routing 을 해준다. 원래 vue.js 나 react 에서는 route 관련 library 를 사용했다. 하지만 그렇지 않아도 nuxt 만 설치하면 그 부분은 자동으로 설정이 된다.

예를 들어, 우리가 MyApp.vue 를 만들고 compile(transpile) 을 해서 static server 에 올려놓는다고 해도 MyApp 을 바로 접근할 수는 없다. 하지만 Nuxt 는 MyApp.vue 를 만들어서 pages directory 에 넣으면 바로 /MyApp 에 접근할 수 있다.

The pages directory | Directory Structure - NuxtJS

Nuxt 설치

Installation - NuxtJS

npm init
...
npm i nuxt

package.json 에 scripts 추가

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  },

index.vue 추가

pages 라는 directory 를 만들자. 그리고 그 안에 index.vue file 을 넣자.

// directory 구조

<nuxt-proj-root> ---+--- package.json
                    |
                    +--- node_modules
                    |
                    +--- pages --+--- index.vue

// index.vue
<template>
  <h1>Hello world!</h1>
</template>

Nuxt 실행

그리고 npm run dev 를 실행하자.

D:\nuxt>npm run dev

> test1@1.0.0 dev D:\a\prog\nodejs\nuxt\test1
> nuxt


i NuxtJS collects completely anonymous data about usage.                                                      16:43:21
  This will help us improve Nuxt developer experience over time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participating? No


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.4                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

i Preparing project for development                                                                           16:43:29
i Initial build may take a while                                                                              16:43:29
√ Builder initialized                                                                                         16:43:29
√ Nuxt files generated                                                                                        16:43:29

* Client █████████████████████████ building (10%) 3/4 modules 1 active
 babel-loader » .nuxt\client.js


* Client █████████████████████████ building (10%) 5/9 modules 4 active
 node_modules\webpack-hot-middleware\client-overlay.js


* Client █████████████████████████ building (10%) 7/9 modules 2 active
 node_modules\webpack-hot-middleware\client-overlay.js


* Client █████████████████████████ building (11%) 9/9 modules 0 active


* Server █████████████████████████ building (10%) 2/2 modules 0 active



 WARN  Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
        ["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.

그러면 http://localhost:3000/ 에 접속하면 index.vue 에 써놓은 것을 볼 수 있다.

만약에 pages directory 에 newpage.vue 를 만든다면, http://localhost:3000/newpage 로 접근할 수 있다.

nuxt generate

npm run generate을 하면 nuxt generate 을 실행하게 된다. 이러면, nuxt.config 의 target 이 static 인 경우에 static version 을 만들어주게 된다. 기본적으로 target 은 'server' 이지만, nuxt generate 인 경우는 그냥 target 에 상관없이 dist 에 generate 된다.

Commands and Deployment - NuxtJS
Deployment Targets - NuxtJS : target 설정하는 법을 확인할 수 있다.
Nuxt configuration file - NuxtJS

// nuxt.config.js
export default {
  target: 'static', // default is 'server'
  build: {
    publicPath: '/nuxt/_nuxt',   //  /_nuxt/adfa.js 에서 가져오던 것을 'nuxt/_nuxt/adfa.js' 에서 가져온다.
    html: {
      minify : {
          collapseBooleanAttributes: true,
          decodeEntities: true,
          minifyCSS: true,
          minifyJS: false,
          processConditionalComments: true,
          removeEmptyAttributes: true,
          removeRedundantAttributes: true,
          trimCustomFragments: true,
          useShortDoctype: true
      }
    }
  },
  generate: {
    dir: 'templates/nuxt'
    subFolders: false
  }
}

참고로 next.config 로도 동작은 한다. 하지만 next.config.js 가 syntax error 같은 것들을 정확히 알려준다.

static version 은 <nuxt-proj-root>/dist 에 만들어진다.

만약 아래 같은 구조였다면,

<nuxt-proj-root> ---+--- package.json
                    |
                    +--- node_modules
                    |
                    +--- pages --+--- index.vue
                                 +--- fun.vue

아래처럼 생성된다.

<nuxt-proj-root> ---+ ...
                    |
                    + ...
                    |
                    +--- dist --+--- index.html
                                |
                                +--- fun (dir) ----- index.html
                                |
                                +--- _nuxt -- *.js

Nested Routes

Nested Routes | Nuxt 3 - Pages directory
Nuxt - The router Property : nuxt.config.js 에서 router 관련 설정을 수정할 수 있다.

기본적으로 아래처럼, pages 의 모습을 가져가면 netsted route 이 된다.

즉, https://localhost/parent 와 https://localhost/parent/child 에 접근이 된다.

<nuxt-proj-root>
    |
    + pages/
        |
        + parent.vue
        |    
        + parent (dir)
            |
            + child.vue

쿠...sal

[컴] Nuxt 의 Routing 사용해보기