create a nuxt app
npm create nuxt-app <project-name>
e.x.
npm create nuxt-app nuxtjs-sqlite-tutorial
move to project
cd nuxtjs-sqlite-tutorial
install packages sqlite3
and @nuxtp/http
npm install --save sqlite3 @nuxt/http
enable nuxt/http inside modules in file nuxt.config.js
modules: [
'@nuxt/http'
]
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
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;
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'
}
]
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>