8 |
9 |
10 |
80 |
--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | The components directory contains your Vue.js Components.
6 |
7 | _Nuxt.js doesn't supercharge these components._
8 |
--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | This directory contains your Application Layouts.
6 |
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 |
--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 |
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 |
--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
1 |
2 | module.exports = {
3 | mode: 'universal',
4 | /*
5 | ** Headers of the page
6 | */
7 | head: {
8 | title: 'Express CRUD',
9 | meta: [
10 | { charset: 'utf-8' },
11 | { name: 'viewport', content: 'width=device-width, initial-scale=1' },
12 | { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
13 | ],
14 | link: [
15 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
16 | ]
17 | },
18 | /*
19 | ** Customize the progress-bar color
20 | */
21 | loading: { color: '#fff' },
22 | /*
23 | ** Global CSS
24 | */
25 | css: [
26 | ],
27 | /*
28 | ** Plugins to load before mounting the App
29 | */
30 | plugins: [
31 | ],
32 | /*
33 | ** Nuxt.js dev-modules
34 | */
35 | buildModules: [
36 | ],
37 | /*
38 | ** Nuxt.js modules
39 | */
40 | modules: [
41 | // Doc: https://bootstrap-vue.js.org
42 | 'bootstrap-vue/nuxt',
43 | // Doc: https://axios.nuxtjs.org/usage
44 | '@nuxtjs/axios',
45 | '@nuxtjs/auth',
46 | ],
47 |
48 | auth: {
49 | strategies: {
50 | local: {
51 | endpoints: {
52 | login: {
53 | url: '/api/users/login',
54 | method: 'post',
55 | propertyName: 'token'
56 | },
57 | logout: true,
58 | user: {
59 | url: '/api/users/user',
60 | method: 'get',
61 | propertyName: 'user'
62 | }
63 | },
64 | tokenRequired: true,
65 | tokenType: "Bearer"
66 | }
67 | },
68 | redirect: {
69 | login: '/user/login', // User will be redirected to this path if login is required
70 | logout: '/', // User will be redirected to this path if after logout, current route is protected
71 | home: '/' // User will be redirect to this path after login if accessed login page directly
72 | },
73 | rewriteRedirects: true,
74 | },
75 | /*
76 | ** Axios module configuration
77 | ** See https://axios.nuxtjs.org/options
78 | */
79 | axios: {
80 | },
81 | /*
82 | ** Build configuration
83 | */
84 | build: {
85 | /*
86 | ** You can extend webpack config here
87 | */
88 | extend (config, ctx) {
89 | }
90 | },
91 |
92 | serverMiddleware: [
93 | '~/api/index.js'
94 | ]
95 | }
96 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nuxt-with-express",
3 | "version": "1.0.0",
4 | "description": "My primo Nuxt.js project",
5 | "author": "Aslam Doctor",
6 | "private": true,
7 | "scripts": {
8 | "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
9 | "build": "nuxt build",
10 | "start": "cross-env NODE_ENV=production node server/index.js",
11 | "generate": "nuxt generate"
12 | },
13 | "dependencies": {
14 | "@nuxtjs/auth": "^4.8.5",
15 | "@nuxtjs/axios": "^5.9.3",
16 | "bcryptjs": "^2.4.3",
17 | "bootstrap": "^4.1.3",
18 | "bootstrap-vue": "^2.0.0",
19 | "cross-env": "^5.2.0",
20 | "express": "^4.16.4",
21 | "express-validator": "^6.3.1",
22 | "jsonwebtoken": "^8.5.1",
23 | "mongoose": "^5.8.7",
24 | "nuxt": "^2.0.0"
25 | },
26 | "devDependencies": {
27 | "nodemon": "^1.18.9"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 |
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 |
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 |
--------------------------------------------------------------------------------
/pages/articles/_id/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
49 |
50 |
51 |
99 |
--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 |
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 |
--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const consola = require('consola')
3 | const { Nuxt, Builder } = require('nuxt')
4 | const app = express()
5 |
6 | // Import and Set Nuxt.js options
7 | const config = require('../nuxt.config.js')
8 | config.dev = process.env.NODE_ENV !== 'production'
9 |
10 | async function start () {
11 | // Init Nuxt.js
12 | const nuxt = new Nuxt(config)
13 |
14 | const { host, port } = nuxt.options.server
15 |
16 | // Build only in dev mode
17 | if (config.dev) {
18 | const builder = new Builder(nuxt)
19 | await builder.build()
20 | } else {
21 | await nuxt.ready()
22 | }
23 |
24 | // Give nuxt middleware to express
25 | app.use(nuxt.render)
26 |
27 | // Listen the server
28 | app.listen(port, host)
29 | consola.ready({
30 | message: `Server listening on http://${host}:${port}`,
31 | badge: true
32 | })
33 | }
34 | start()
35 |
--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
1 | # STATIC
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | This directory contains your static files.
6 | Each file inside this directory is mapped to `/`.
7 | Thus you'd want to delete this README.md before deploying to production.
8 |
9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 |
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 |
--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aslamdoctor/nuxt-with-express/54d5230fbb02bea9b19fae564898d41f236cc72b/static/favicon.ico
--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
1 | # STORE
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | This directory contains your Vuex Store files.
6 | Vuex Store option is implemented in the Nuxt.js framework.
7 |
8 | Creating a file in this directory automatically activates the option in the framework.
9 |
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 |
--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aslamdoctor/nuxt-with-express/54d5230fbb02bea9b19fae564898d41f236cc72b/store/index.js
--------------------------------------------------------------------------------
/todo.md:
--------------------------------------------------------------------------------
1 | # Tasks
2 |
3 | - [x] CRUD With Express API
4 | - [x] Form Validations
5 | - [x] Notifications
6 | - [x] Authentication
7 | - [x] Add security to API routes
8 | - [ ] Add CORS security
9 | - [ ] Module Relationships
10 | - [ ] File Upload
11 |
--------------------------------------------------------------------------------