Repository of my portfolio developed under an AdonisJS backend as well as a NuxtJS frontend with vueJS. Using the SASS pre-processor.
An open source app for your personal website !
To use it refer you to the documentation.
https://github.com/Izoxy/adonis-nuxt-template/
yarn build-template
yarn api
to start the API and yarn front
to start the frontend in different terminals.yarn run-template
It's already finished, it's really quick to set up.
The API is in /api/app
and manage the connection with database to execute queries.
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
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
In /api/config
you can see all configs which used by Adonis.
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
.
For a perfect routing, we use the middleware suggested by Adonis and those of Nuxt.
In /api/app/Middleware
and in /frontend/middleware
.
The routes are registered in /api/start/routes.ts
.
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
Here, we have the multi-language system. How to use it ? You need to add the lang switcher in your layout for example.
For use the translation and others, refer you to the nuxt-i18n documentation.
Example :
{{ $t('welcome') }}
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',
}
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 }
}
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 }
}
Author: LeadcodeDev
Demo: https://www.leadcode.fr/
Source Code: https://github.com/LeadcodeDev/portfolio-adonis-nuxt
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