Nucleus
Web API startup template with a Vue Client application.
How to Start?
- Select
Nucleus.Web.Api
project "Set as Startup Project" - Open "Package Manager Console" and select default project as
src/Nucleus.EntityFramework
- Run
update-database
command to create database. - Run(F5 or CTRL+F5) Web API project first
- Run
yarn
command at locationsrc/Nucleus.Web.Vue
to install npm packages. - Run
yarn serve
command to run Vue application. - Admin user name and password :
admin/123qwe
Vue Application Screenshots
Login Page
Register Page
List Pages
Create/Edit Pages
ASP.NET Core Web API
Project solution:
Swagger UI
Document
Adding New Language
- Add json file to store language keys and values to
Nucleus\src\Nucleus.Web.Vue\src\assets\localizations\your_language.json
- Copy
en.json
content and translate the values to target language. - Add country flag to
Nucleus.Web.Vue\src\assets\images\icons\flags\your_country.png
. Get images from http://www.iconarchive.com/show/flag-icons-by-gosquared.html - Add language to language selection menu in
Nucleus\src\Nucleus.Web.Vue\src\account\account-layout.vue
andNucleus\src\Nucleus.Web.Vue\src\admin\components\menu\top-menu\top-menu.vue
like following
account-layout.vue
<v-menu>
<template v-slot:activator="{ on }">
<v-btn color="primary" dark outlined rounded v-on="on">
<img :src="require('@/assets/images/icons/flags/' + selectedLanguage.languageCode + '.png')" class="mr-2 ml-1" />
{{selectedLanguage.languageName}}
<v-icon dark class="ml-3">mdi-menu-down</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item @click="changeLanguage('en', 'English')">
<img src="@/assets/images/icons/flags/en.png" class="mr-2" />
<v-list-item-title>English</v-list-item-title>
</v-list-item>
<v-list-item @click="changeLanguage('tr', 'Türkçe')">
<img src="@/assets/images/icons/flags/tr.png" class="mr-2" />
<v-list-item-title>Türkçe</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
top-menu.vue
<v-menu>
<template v-slot:activator="{ on }">
<v-btn color="primary" v-on="on">
<img :src="require('@/assets/images/icons/flags/' + selectedLanguage.languageCode + '.png')" class="mr-2 ml-1" />
{{selectedLanguage.languageName}}
<v-icon dark class="ml-3">mdi-menu-down</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item @click="changeLanguage('en', 'English')">
<img src="@/assets/images/icons/flags/en.png" class="mr-2" />
<v-list-item-title>English</v-list-item-title>
</v-list-item>
<v-list-item @click="changeLanguage('tr', 'Türkçe')">
<img src="@/assets/images/icons/flags/tr.png" class="mr-2" />
<v-list-item-title>Türkçe</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
Tags & Technologies
- ASP.NET Core Web API
- Entity Framework Core
- ASP.NET Core Identity
- JWT (Bearer Token) Based Authentication
- Automapper
- Serilog
- Swagger
- ASP.NET Core Test Host
- Authorization & Authentication
- Exception Handling & Logging
- Vue.js
- Vue Router
- Vuetify
- Vue i18n