Nuxt.js
Nuxt.js is a frontend framework based on Vue.JS.
This document explains how to use it in conjunction with FoalTS. A sample source code can be found on Github.
Installation
Create your frontend and backend projects in two different folders.
foal createapp backend
npx create-nuxt-app frontend
When the CLI asks which server framework to choose, select None.
Set Up
Go to your server directory and install
nuxt
.npm install nuxt
Then update your
src/index.ts
file as follows:import { Builder, Nuxt } from 'nuxt';
// ...
// Import and Set Nuxt.js options
const config = require('../../frontend/nuxt.config.js');
config.dev = Config.get('settings.debug', true);
async function main() {
// Init Nuxt.js
const nuxt = new Nuxt(config);
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt);
await builder.build();
} else {
await nuxt.ready();
}
// ...
const app = createApp(AppController, {
postMiddlewares: [
nuxt.render
]
});
// ...
}
main();Delete the file
index.html
inbackend/public
.Open the file
nuxt.config.js
in thefrontend/
directory and update its first lines as follows:module.exports = {
srcDir: '../frontend',
// ...
}