├── .gitignore
├── tsconfig.json
├── nuxt.config.ts
├── app.vue
├── assets
    └── css
    │   └── main.css
├── server
    └── api
    │   ├── posts.get.js
    │   └── posts.post.js
├── layouts
    └── default.vue
├── package.json
├── config
    └── config.json
├── models
    ├── posts.js
    └── index.js
├── .github
    └── ISSUE_TEMPLATE
    │   └── bug_report.md
├── migrations
    └── 20220804091844-create-posts.js
├── LICENSE
├── README.md
├── components
    ├── TheHeader.vue
    └── TheFooter.vue
└── pages
    └── index.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | export default {
2 |   css: [
3 |     // CSS file in the project
4 |     '@/assets/css/main.css',
5 |   ]
6 | }


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <NuxtLayout>
4 |       <NuxtPage />
5 |     </NuxtLayout>
6 |   </div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
1 | @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css");
2 | .container {
3 |   margin: 0 auto;
4 | }
5 | 


--------------------------------------------------------------------------------
/server/api/posts.get.js:
--------------------------------------------------------------------------------
1 | import db from '../../models/index.js';
2 | 
3 | export default defineEventHandler((event) => {
4 |   return db.Posts.findAll();
5 | })


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <TheHeader />
 4 |     <slot />
 5 |     <TheFooter />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <style>
10 | * {
11 |   box-sizing: border-box;
12 | }
13 | </style>
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview"
 8 |   },
 9 |   "devDependencies": {
10 |     "nuxt": "^3.16.2",
11 |     "sequelize-cli": "^6.6.2"
12 |   },
13 |   "dependencies": {
14 |     "mysql2": "^3.14.0",
15 |     "sequelize": "^6.37.7"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/config/config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "development": {
 3 |     "username": "root",
 4 |     "password": null,
 5 |     "database": "database_development",
 6 |     "host": "127.0.0.1",
 7 |     "dialect": "mysql"
 8 |   },
 9 |   "test": {
10 |     "username": "root",
11 |     "password": null,
12 |     "database": "database_test",
13 |     "host": "127.0.0.1",
14 |     "dialect": "mysql"
15 |   },
16 |   "production": {
17 |     "username": "root",
18 |     "password": null,
19 |     "database": "database_production",
20 |     "host": "127.0.0.1",
21 |     "dialect": "mysql"
22 |   }
23 | }


--------------------------------------------------------------------------------
/models/posts.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | import { Model } from 'sequelize';
 3 | export default (sequelize, DataTypes) => {
 4 |   class Posts extends Model {
 5 |     /**
 6 |      * Helper method for defining associations.
 7 |      * This method is not a part of Sequelize lifecycle.
 8 |      * The `models/index` file will call this method automatically.
 9 |      */
10 |     static associate(models) {
11 |       // define association here
12 |     }
13 |   }
14 |   Posts.init({
15 |     title: DataTypes.STRING,
16 |     content: DataTypes.TEXT
17 |   }, {
18 |     sequelize,
19 |     modelName: 'Posts',
20 |   });
21 |   return Posts;
22 | };


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Additional context**
27 | Add any other context about the problem here.
28 | 


--------------------------------------------------------------------------------
/migrations/20220804091844-create-posts.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | module.exports = {
 3 |   async up(queryInterface, Sequelize) {
 4 |     await queryInterface.createTable('Posts', {
 5 |       id: {
 6 |         allowNull: false,
 7 |         autoIncrement: true,
 8 |         primaryKey: true,
 9 |         type: Sequelize.INTEGER
10 |       },
11 |       title: {
12 |         type: Sequelize.STRING
13 |       },
14 |       content: {
15 |         type: Sequelize.TEXT
16 |       },
17 |       createdAt: {
18 |         allowNull: false,
19 |         type: Sequelize.DATE
20 |       },
21 |       updatedAt: {
22 |         allowNull: false,
23 |         type: Sequelize.DATE
24 |       }
25 |     });
26 |   },
27 |   async down(queryInterface, Sequelize) {
28 |     await queryInterface.dropTable('Posts');
29 |   }
30 | };


--------------------------------------------------------------------------------
/models/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import Sequelize, { DataTypes } from 'sequelize';
 4 | import allConfig from '~~/config/config.json';
 5 | 
 6 | 
 7 | // import all models
 8 | import Post from './posts.js';
 9 | 
10 | const env = process.env.NODE_ENV || 'development';
11 | const config = allConfig[env];
12 | 
13 | 
14 | 
15 | const db = {};
16 | 
17 | let sequelize;
18 | if (config.use_env_variable) {
19 |   sequelize = new Sequelize(process.env[config.use_env_variable], config);
20 | } else {
21 |   sequelize = new Sequelize(config.database, config.username, config.password, config);
22 | }
23 | 
24 | db['Posts'] = Post(sequelize, DataTypes);
25 | 
26 | Object.keys(db).forEach(modelName => {
27 |   if (db[modelName].associate) {
28 |     db[modelName].associate(db);
29 |   }
30 | });
31 | 
32 | db.sequelize = sequelize;
33 | db.Sequelize = Sequelize;
34 | 
35 | export default db;
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Anik Ghosh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-mysql-sequelize
 2 | CRUD application example using Nuxt JS 3, Sequelize, and MySQL.
 3 | 
 4 | 
 5 | ## I'm using bootstrap 5 cdn for basic styling
 6 | So you have to remove the bootstrap cdn link from main.css file and add your own css file or install library.
 7 | 
 8 | ## Update Database connection
 9 | 
10 | You will find the connection details in config/config.json file. Then you have to run migration command.
11 | ```
12 | npx sequelize-cli db:migrate
13 | ```
14 | 
15 | 
16 | 
17 | ## Setup
18 | 
19 | Make sure to install the dependencies:
20 | 
21 | ```bash
22 | # yarn
23 | yarn install
24 | 
25 | # npm
26 | npm install
27 | 
28 | # pnpm
29 | pnpm install --shamefully-hoist
30 | ```
31 | 
32 | ## Development Server
33 | 
34 | Start the development server on http://localhost:3000
35 | 
36 | ```bash
37 | npm run dev
38 | ```
39 | 
40 | ## Production
41 | 
42 | Build the application for production:
43 | 
44 | ```bash
45 | npm run build
46 | ```
47 | 
48 | Locally preview production build:
49 | 
50 | ```bash
51 | npm run preview
52 | ```
53 | 
54 | Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.
55 | 


--------------------------------------------------------------------------------
/server/api/posts.post.js:
--------------------------------------------------------------------------------
 1 | import db from '../../models/index.js';
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const form = await readBody(event);
 5 |   const { title, content } = extractTitleAndBody(form.content);
 6 | 
 7 |   if (form.id && form.id != '') {
 8 |     return updatePost(form.id, title, content);
 9 |   }
10 |   return createPost(title, content);
11 | })
12 | 
13 | 
14 | /**
15 |  * Extract title and body from content.
16 |  * 
17 |  * @param {String} content - The content of the post.
18 |  * @returns {Object} - The title and body of the post.
19 |  */
20 | function extractTitleAndBody(bodyData) {
21 |   const dataArr = bodyData.split('||');
22 |   const title = dataArr[0].trim();
23 |   const content = (dataArr[1] || '').trim();
24 |   return { title, content };
25 | }
26 | 
27 | /**
28 |  * Create a new post.
29 |  * 
30 |  */
31 | async function createPost(title, content) {
32 |   const post = await db.Posts.create({
33 |     title,
34 |     content,
35 |   });
36 |   return post;
37 | }
38 | 
39 | /**
40 |  * Update a post.
41 |  */
42 | async function updatePost(id, title, content) {
43 |   const post = await db.Posts.update({
44 |     title,
45 |     content,
46 |   }, {
47 |     where: { id },
48 |   });
49 |   return post;
50 | }


--------------------------------------------------------------------------------
/components/TheHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <div class="container">
 4 |       <div class="header-wrapper">
 5 |         <div class="brand-log">
 6 |           <nuxt-link> Home </nuxt-link>
 7 |         </div>
 8 |         <nav>
 9 |           <ul>
10 |             <li>
11 |               <nuxt-link to="/"> Home </nuxt-link>
12 |             </li>
13 |             <li>
14 |               <nuxt-link to="/about"> About </nuxt-link>
15 |             </li>
16 |             <li>
17 |               <nuxt-link to="/contact"> Contact </nuxt-link>
18 |             </li>
19 |           </ul>
20 |         </nav>
21 |       </div>
22 |     </div>
23 |   </header>
24 | </template>
25 | 
26 | <style>
27 |   header {
28 |     background-color: #f9f9f9;
29 |     padding: 5px 0;
30 |   }
31 |   .header-wrapper {
32 |     display: flex;
33 |     justify-content: space-between;
34 |     align-items: center;
35 |   }
36 |   .brand-log {
37 |     font-weight: 600;
38 |   }
39 |   nav ul {
40 |     list-style: none;
41 |     display: flex;
42 |     gap: 25px;
43 |     align-items: center;
44 |     margin-top: revert;
45 |   }
46 |   nav ul li a {
47 |     color: #222;
48 | 
49 |     text-decoration: none;
50 |   }
51 |   nav ul li a:hover {
52 |     color: #0070f3;
53 |   }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { ref, reactive, watchEffect } from 'vue'
  3 | // get posts from api
  4 | const { data: posts, pending, refresh, error  } = await useFetch('/api/posts');
  5 | 
  6 | // reactive form data properties
  7 | const form = reactive({
  8 |   id: '',
  9 |   content: '',
 10 |   error: false
 11 | });
 12 | 
 13 | const update = ref(false);
 14 | 
 15 | watchEffect(() => {
 16 |   if (form.content.length > 0) {
 17 |     form.error = false;
 18 |   } else {
 19 |     form.id = '';
 20 |     update.value = false;
 21 |   }
 22 |   if(form.id != '') {
 23 |     update.value = true
 24 |   }
 25 | });
 26 | 
 27 | async function post(event) {
 28 |   event.preventDefault();
 29 | 
 30 |   // validate form data
 31 |   form.error = false;
 32 |   if (!form.content.trim()) {
 33 |     form.error = true;
 34 |     return;
 35 |   }
 36 | 
 37 |   // post form data to api
 38 |   await $fetch('/api/posts', {
 39 |     method: 'POST',
 40 |     body: JSON.stringify(form)
 41 |   });
 42 |   refresh();
 43 |   // reset form data
 44 |   form.id = '';
 45 |   form.content = '';
 46 | }
 47 | // Select for update
 48 | async function select({id, title, content}) {
 49 |   form.id = id;
 50 |   form.content = title +' || '+content;
 51 | }
 52 | 
 53 | // Delete post
 54 | async function deletePost(id) {
 55 |   await $fetch(`/api/posts/${id}`, {
 56 |     method: 'DELETE'
 57 |   });
 58 |   refresh();
 59 | }
 60 | 
 61 | 
 62 | 
 63 | 
 64 | 
 65 | useHead(() => {
 66 |   return {
 67 |     title: 'Hello World',
 68 |     meta: [
 69 |       {
 70 |         name: 'description',
 71 |         content: 'This is a crud.'
 72 |       }
 73 |     ]
 74 |   }
 75 | })
 76 | </script>
 77 | 
 78 | <template>
 79 |   <div class="container row justify-content-center">
 80 |     <div class="my-5 col-12 col-md-8 border border-light rounded px-0">
 81 |       <div class="border-bottom border-light mb-4">
 82 |         <!--single line form-->
 83 |         <form @submit="post" class="row">
 84 |           <div class="form-group col">
 85 |             <input
 86 |               type="text"
 87 |               name="content"
 88 |               v-model.trim="form.content"
 89 |               class="form-control" :class="form.error ? 'is-invalid ' : ''"
 90 |               placeholder="Title || Content"
 91 |             />
 92 |           </div>
 93 |           <div class="col-2 mr-0">
 94 |             <button type="submit" class="btn btn-primary w-100">{{ update ? "Update" : "Add" }}</button>
 95 |           </div>
 96 |         </form>
 97 |       </div>
 98 |       <table class="table">
 99 |         <thead>
100 |           <tr>
101 |             <th scope="col">#</th>
102 |             <th scope="col">Title</th>
103 |             <th scope="col">Content</th>
104 |             <th scope="col">Handle</th>
105 |           </tr>
106 |         </thead>
107 |         <tbody>
108 |           <tr v-for="post in posts" :key="post.id">
109 |             <th scope="row" class="align-middle">{{ post.id }}</th>
110 |             <td class="align-middle">{{ post.title }}</td>
111 |             <td class="align-middle">{{ post.content }}</td>
112 |             <td>
113 |               <button class="btn btn-primary" @click="select(post)">Edit</button>
114 |               <button class="btn btn-danger ms-3" @click="deletePost(post.id)">Delete</button>
115 |             </td>
116 |           </tr>
117 |         </tbody>
118 |       </table>
119 |     </div>
120 |   </div>
121 | </template>


--------------------------------------------------------------------------------
/components/TheFooter.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <footer>
  3 |   <div class="container">
  4 |     <div class="wrapper">
  5 |   <div class="footer-item footer-1">
  6 |     <div class="footer-widget">
  7 |       <div class="footer-widget-title">
  8 |         <h3>About Us</h3>
  9 |       </div>
 10 |       <div class="footer-widget-content">
 11 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quisquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quos, quisquam.</p>
 12 |       </div>
 13 |     </div>
 14 |   </div>
 15 |   <div class="footer-item footer-2">
 16 |     <div class="footer-widget">
 17 |       <div class="footer-widget-title">
 18 |         <h3>Recent Posts</h3>
 19 |       </div>
 20 |       <div class="footer-widget-content">
 21 |         <ul>
 22 |           <li>
 23 |             <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
 24 |           </li>
 25 |           <li>
 26 |             <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
 27 |           </li>
 28 |           <li>
 29 |             <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
 30 |           </li>
 31 |         </ul>
 32 |       </div>
 33 |     </div>
 34 |   </div>
 35 |   <div class="footer-item footer-3">
 36 |     <div class="footer-widget">
 37 |       <div class="footer-widget-title">
 38 |         <h3>Contact Us</h3>
 39 |       </div>
 40 |       <div class="footer-widget-content">
 41 |         <ul>
 42 |           <li>
 43 |             <a href="#">Lorem ipsum</a>
 44 |           </li>
 45 |           <li>
 46 |             <a href="#">Dolor sit </a>
 47 |           </li>
 48 |           <li>
 49 |             <a href="#"> Consectetur adipisicing</a>
 50 |           </li>
 51 |           <li>
 52 |             <a href="#">Lorem ipsum</a>
 53 |           </li>
 54 |           <li>
 55 |             <a href="#">Dolor sit </a>
 56 |           </li>
 57 |         </ul>
 58 |       </div>
 59 |     </div>
 60 |   </div>
 61 |   <div class="footer-item footer-4">
 62 |     <div class="footer-widget">
 63 |       <div class="footer-widget-title">
 64 |         <h3>Subscribe</h3>
 65 |       </div>
 66 |       <div class="footer-widget-content">
 67 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam</p>
 68 |         <form action="#" method="post">
 69 |           <input type="text" placeholder="Enter your email">
 70 |           <button type="submit">Subscribe</button>
 71 |         </form>
 72 |       </div>
 73 |     </div>
 74 |   </div>
 75 |   </div>
 76 |   </div>
 77 | </footer>
 78 | </template>
 79 | 
 80 | <style >
 81 |   footer {
 82 |     background-color: #f9f9f9;
 83 |     padding: 40px 0;
 84 |     
 85 |   }
 86 |   .wrapper{
 87 |     display: flex;
 88 |     gap: 20px;
 89 |     justify-content: space-between;
 90 |     flex-wrap: wrap;
 91 |     align-items: flex-start;
 92 |     box-sizing: border-box;
 93 |   }
 94 |   .footer-item {
 95 |     width: calc(25% - 20px);
 96 |   }
 97 |   .footer-widget-content ul {
 98 |     padding: 0 20px ;
 99 |   }
100 |   .footer-widget-content ul li {
101 |       margin-bottom: 10px;
102 |     }
103 |   .footer-widget-content ul li a {
104 |     color: #222;
105 |     text-decoration: none;
106 |     
107 |   }
108 |   .footer-widget-content ul li a:hover {
109 |     text-decoration: underline;
110 |   }
111 | 
112 |   @media screen and (max-width: 768px) {
113 |     .footer-item {
114 |       width: calc(50% - 20px);
115 |     }
116 |   }
117 |   @media screen and (max-width: 480px) {
118 |     .footer-item {
119 |       width: 100%;
120 |     }
121 |   }
122 |   .footer-widget-content input{
123 |     width: 100%;
124 |     border: 1px solid #ccc;
125 |     border-radius: 5px;
126 |     padding: 10px;
127 |     margin-bottom: 10px;
128 |   }
129 |   .footer-widget-content button{
130 |     background-color: #222;
131 |     color: #fff;
132 |     border: none;
133 |     border-radius: 5px;
134 |     padding: 10px 20px;
135 |     margin-bottom: 10px;
136 |     cursor: pointer;
137 |   }
138 | 
139 | </style>


--------------------------------------------------------------------------------