App AdonisJS & NuxtJS

Repository of my portfolio developed under an AdonisJS backend as well as a NuxtJS frontend with vueJS. Using the SASS pre-processor.

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

• Bootstrap Vue
• SASS
• AdonisJS
• VueJS
• NuxtJS

Summary

• Installation
• Guide
• Contributors
• License

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

• Controllers
• Models
• Validators
• Layouts
• Configurations
• Middleware
  • Routes
• Configurations
• Auth
• Lang
  • Use the translation
  • Add a language
• Components

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.

• Navbar
• Header
• Sidebar
• Lang Switcher

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

• Baptiste Parmantier
• Alexandre Gossard

Download Details:

Author: LeadcodeDev

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

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

vuejs vue javascript nuxtjs

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Plausible Analytics for Vue.js and NuxtJS Vue.js plugin and NuxtJS module for Plausible Analytics

Veluxi Starter - Vue JS Landing Page Template .Veluxi Vue.js Starter Project with NuxtJS and Vuetify

dcyou.github.io My resume by using NuxtJS (VueJS), Element and some useful tools

nuxt-storyblok-boilerplate .Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios