App AdonisJS & NuxtJS

App AdonisJS & NuxtJS

An open source app for your personal website ! An open source app for your personal website ! Made with AdonisJS, NuxtJS & VueJS.

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.

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.

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 }
}

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: Izoxy

Source Code: https://github.com/Izoxy/adonis-nuxt-template

vue vuejs nuxtjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

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.

Veluxi Vue.js Starter Project with NuxtJS and Vuetify

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

Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

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

Classic Mini Cooper owners built with VueJS and NuxtJS

Classic Mini DIY is the best place to find all the reference material, how to videos, and much much more for your Classic Mini

Boilerplate with Foundations for Sites in NuxtJS

Nuxtation Boilerplate with Foundations for Sites in NuxtJS This repository is one example of how to integrate Foundation for Sites into the progressive Vue.js framework, the Nuxt.js project. A Foundation + NuxtJS project use webpack4 and babel7