Skip to content

chifi49/nuxtjs-sqlite-tutorial

Repository files navigation

Installation

1st step

create a nuxt app npm create nuxt-app <project-name> e.x. npm create nuxt-app nuxtjs-sqlite-tutorial

2nd step

move to project cd nuxtjs-sqlite-tutorial

3rd step

install packages sqlite3 and @nuxtp/http

npm install --save sqlite3 @nuxt/http

4th step

enable nuxt/http inside modules in file nuxt.config.js

modules: [ '@nuxt/http' ] 

5th step

create a folder with the name 'database' inside your project

download the application db browser for sqlite here

open the application and create a new database and save it inside the database folder with the name db.sqlite

while you still have the application open, create a table users and add to 2 columns: id as primary key auto increment and name as text type

browse the table users and enter some data

then write changes to the database and close the application

6th step

create a folder models inside your project and add a file with the name users.js and the following code

function users(db){ this.db = db; } users.prototype.findUsers = async function(){ var me = this; return new Promise(function(resolve,reject){ me.db.all("select * from users",[],function(err,rows){ if(err){ return reject(err); } resolve(rows); }) }) } module.exports = users; 

7th step

create a folder api inside your project and inside that folder add a file named index.js with the following contents

const bodyParser = require('body-parser') const app = require('express')() const sqlite3 = require('sqlite3'); let db = new sqlite3.Database(__dirname+'/../database/db.sqlite',sqlite3.OPEN_READWRITE,function(err){ if(err){ console.log(__dirname); console.log(err); } }); const usersmodel = require(__dirname+'/../models/users.js'); app.use(bodyParser.json()) app.all('/users', async (req, res) => { const usersdb = new usersmodel(db); const users = await usersdb.findUsers(); res.json({ users: users }) }) module.exports = app 

register your api in nuxt.config.js with the following code

serverMiddleware:[ { path:'/api',handler:'~/api/index.js' } ] 

8th step

If you open your application in http://localhost:3000/api/users you should see the response from your api with the content of the users table. If you want to include it an a vue page then load it from the method asyncData e.x

<template> <ul> <li v-for="user in users"> {{user.id}} - {{user.name}} </li> </ul> </template> <script> export default{ async asyncData(context){ const data = await context.$http.$get('/api/users'); return { users: data.users } } } </script> 

About

steps to use sqlite with a serverMiddleware / a.k.a api in a nuxtjs application

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published