Need help with Nucleus?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

alirizaadiyahsi
244 Stars 62 Forks MIT License 530 Commits 4 Opened issues

Description

Vue startup application template that uses ASP.NET Core API layered architecture at the back-end and JWT based authentication

Services available

!
?

Need anything else?

Contributors list

No Data

Nucleus

Nucleus

Web API startup template with a Vue Client application.



Requirements

  • Vue CLI v3.x or later.
  • Nodejs v10.x or later.
  • Visual Studio 2019 v16.3 or later for Windows.
  • Visual Studio 2019 for Mac v8.3 or later for macOS.

How to Start?

Local Environment

  • 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 location
    src/Nucleus.Web.Vue
    to install npm packages.
  • Run
    yarn serve
    command to run Vue application.
  • Admin user name and password :
    admin/123qwe

Run with Docker

  • Run
    docker-compose build
    command.
  • Run
    docker-compose up -d
    command to run application.
  • Go to
    http://localhost:36221

To change the environment

  • Run
    docker-compose -f docker-compose-production.yml build
    command.
  • Run
    docker-compose -f docker-compose-production.yml up -d
    command
  • Go to
    http://localhost:36211

Vue Application Screenshots

Login Page

Vue Client Demo

Register Page

Vue Client Demo

Forgot Password Page

Vue Client Demo

List Pages

Vue Client Demo

Create/Edit Pages

Vue Client Demo

ASP.NET Core Web API

Project solution:

Project Solution

Swagger UI

Swagger UI

Document

Swagger UI Authorize

You can login on swagger ui by using a bearer token. So you can make requests to authorized end-points. Check the following steps.

  • In swagger ui, execute
    api/login
    to get a bearer token.
  • Copy bearer token that is in
    api/login
    response.
  • Click
    Authorize
    button in swagger ui page.
  • Enter the token like
    Bearer 
    and click
    Authorize
    .
  • Now you can make requests to authorized end-points.

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
    and
    Nucleus\src\Nucleus.Web.Vue\src\admin\components\menu\top-menu\top-menu.vue
    like following

account-layout.vue

    

<v-list>
    <v-list-item>
        <img src="https://github.com/alirizaadiyahsi/Nucleus/raw/master/@/assets/images/icons/flags/en.png" class="mr-2">
        <v-list-item-title>English</v-list-item-title>
    </v-list-item>
    <v-list-item>
        <img src="https://github.com/alirizaadiyahsi/Nucleus/raw/master/@/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>

top-menu.vue

    

<v-list>
    <v-list-item>
        <img src="https://github.com/alirizaadiyahsi/Nucleus/raw/master/@/assets/images/icons/flags/en.png" class="mr-2">
        <v-list-item-title>English</v-list-item-title>
    </v-list-item>
    <v-list-item>
        <img src="https://github.com/alirizaadiyahsi/Nucleus/raw/master/@/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>

Adding New Permission

  • All definitions are made in
    DefaultPermissions
    .
  • First add permission name as const like
    public const string PermissionNameABC = "Permissions_ABC";
    .
  • Add a permission entity that type
    Permission.cs
    class and give a hard-coded guid id.
  • Last, add this permission variable to
    DefaultPermissions.All()
    method.

Tags & Technologies

Lincense

MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.