인증과 사용자권한 기능이 구현된 Nuxt.js 기반의 상용구 코드.
- 📘 Documentation: https://nuxtjs.org
- 👥 Community: cmty.app/nuxt
- 🎬 Video: 1 minute demo
- 🐦 Twitter: @nuxt_js
- 💬 Chat: Discord
- 📦 Nuxt.js Modules
- 👉 Play with Nuxt.js online
- Nuxt.js 기반( SSR, Module, Plugin, Middleware, Custom Layout, Static file serving ...)
- Node Application Server(Express)
- Query language for APIs(Graphql, Apollo)
- NoSQL Database(MongoDB)
- Material CSS Framework(vuetify)
- 토큰 기반 사용자 인증(Jwt)
- 사용자/그룹 권한 관리(vue-kindergarten)
- 소셜 인증(Passport)
- 화면: 홈, 회원가입/로그인, 프로필, 어드민
$ git clone https://github.com/she110ff/nuxt-vuetify-graphql-mongoDB.git
$ cd nuxt-vuetify-graphql-mongoDB
$ npm install
$ npm run dev(or start)
$ npm test
참 쉽죠!
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const pkg = require('./package')
module.exports = {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
}
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: ['~/assets/style/app.styl'],
/*
** Plugins to load before mounting the App
*/
plugins: ['@plugins/vuetify'],
/*
** Nuxt.js modules
*/
modules: [
'@nuxtjs/pwa',
[
'@nuxtjs/apollo',
{
clientConfigs: {
default: '~/graphql/apollo/defaultClient.js'
}
}
]
],
router: {
middleware: 'check-auth'
},
vendor: ['apollo-link-context'],
/*
** Build configuration
*/
build: {
transpile: ['vuetify/lib'],
plugins: [new VuetifyLoaderPlugin()],
loaders: {
stylus: {
import: ['~assets/style/variables.styl']
}
},
/*
** You can extend webpack config here
*/
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}Learn more: https://nuxtjs.org/guide/configuration
You might want to use your own server with your configurations, your API and everything awesome your created with. That's why you can use nuxt.js as a middleware. It's recommended to use it at the end of your middleware since it will handle the rendering of your web application and won't call next().
{
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"@nuxt/babel-preset-app"
]
}
},
"plugins": ["babel-plugin-transform-runtime", "transform-async-to-generator"]
}Learn more: https://babeljs.io/docs/en/config-files#root-babelconfigjs-files
실행이 아닌 배포를 위해, 먼저 빌드를 실행해야 합니다. 따라서 빌드와 실행을 구분하여 스크립트를 작성하세요.
nuxt build
nuxt start예를 들어, now에 배포하기 위해서 package.json을 아래와 같이 사용하기를 권장합니다:
{
"name": "my-app",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}그 다음 now 그리고 즐겁게 놀아보세요!
노트: .nuxt 를 .npmignore or .gitignore 에 추가하기를 권장합니다.