Morioh
Login
Jack Downson

Jack Downson

3 years ago

App AdonisJS & NuxtJS

App AdonisJS & NuxtJS

An open source app for your personal website !

To use it refer you to the documentation.

Features

  • Authentication system
  • Navbar included
  • Sidebar included
  • Header with Carousel
  • Multi-language

Technologies used

Banner

Summary

Installation

  1. Clone the repository from https://github.com/Izoxy/adonis-nuxt-template/
  2. Open a terminal in the folder
  3. Type yarn build-template
  4. For run the template in dev mode, you need to type yarn api to start the API and yarn front to start the frontend in different terminals.
  5. For generate your site (in VPS), simply type yarn run-template

It’s already finished, it’s really quick to set up.

Guide

Master - Sommaire
For Adonis

The API is in /api/app and manage the connection with database to execute queries.

For Nuxt

You can also see the master of Nuxt in /frontend and see the main config in /frontend/nuxt.config.js.

####### Controllers

The controllers are the main functions which manage the users, cookies and the authentication system. They are available in /api/app/Controllers/Http.

####### Models

The models are BaseModel, they serve to represent the tables from the database. They are available in /api/app/Models

####### Validators

The validators serve to catch many errors that the user may cause (wrong email, etc…) They are available in /api/app/Validators/users

Layouts

Here you can find the master from the application.
In /layouts/master/master.vue, you have the main layout.
You have also the index in /frontend/pages/index.vue

Configurations
For Adonis

In /api/config you can see all configs which used by Adonis.

For Nuxt

In /frontend/configurations you can see all modules which manage many functions (Build, Axios, Meta, Plugins, etc…).
There are all registered in the main nuxt config /frontend/nuxt.config.js.

Middleware

For a perfect routing, we use the middleware suggested by Adonis and those of Nuxt.
In /api/app/Middleware and in /frontend/middleware.

Routes

The routes are registered in /api/start/routes.ts.

Auth

The authentication system is complexe. We have many files who manage the system.
We use Adonis for the back-end, the part who manage the database is in /api/app.
Moreover, we have a specific usage from the Cookie to save the data from the users. You can find it in /front/store

Lang

Here, we have the multi-language system. How to use it ?
You need to add the lang switcher in your layout for example.

Use the translation

For use the translation and others, refer you to the nuxt-i18n documentation.

Example :

{{ $t('welcome') }}
Add a language

We need to add your lang in /frontend/configurations/Translations.js in the locales field like that :

{
    code: 'en',
    name: 'English',
    file: 'en-US.js'
}

And you need to create your lang file in /frontend/locales like that :

export default {
    welcome: 'Bienvenue',
}
Components

Here you can find the different add-ons available in our template.

If you encounter difficulties with one or more components, do not hesitate to contact us.

Navbar

A simple navbar. You can see the documentation from Navbar here.
Just import <Navbar/> from /components/navbar/Navbar.vue And need to do add this in <script></script>

import Navbar from "~/components/navbar/Navbar";
export default {
    name: "YourComponentName",
    components: { Navbar }
}

If you want to have it on all pages, putting it on the main layout is advisable.

Header

A simple header with a Carousel. You can see the documentation from Carousel here.
Just import <Header/> from /components/header/Header.vue And need to do add this in <script></script>

import Header from "~/components/header/Header";
export default {
    name: "YourComponentName",
    components: { Header }
}
Sidebar

A simple sidebar.
Just import <Sidebar/> from /components/sidebar/Sidebar.vue And need to do add this in <script></script>

import Sidebar from "~/components/sidebar/Sidebar";
export default {
    name: "YourComponentName",
    components: { Sidebar }
}
LangSwitcher

It’s a simple button with a dropdown to change the language. You only have to import <LangSwitcher/> from /components/langswitcher/LangSwitcher.vue And need to do add this in <script></script>

import LangSwitcher from "~/components/langswitcher/LangSwitcher";
export default {
    name: "YourComponentName",
    components: { LangSwitcher }
}

Contributors

Download Details:

Author: LeadcodeDev

Demo: https://www.leadcode.fr/

Source Code: https://github.com/LeadcodeDev/portfolio-adonis-nuxt

#vuejs #vue #javascript #nuxtjs

App AdonisJS & NuxtJS
14.35 GEEK