Admin dashboard template built with Vue and Vuetify

🤘 Vue Material Admin

Free and open-source admin dashboard template built with Vue and Vuetify. Developed with ❤️ by Flatlogic. If you love our project please star ⭐️ our repo!

View Demo | Download | More templates

Features

Vue Material Admin is a great template to quick-start development of SAAS, CMS, IoT Dashboard, E-Commerce apps, etc
Lite version of a Vue Material Admin includes following features and pages:

Vuetify
Responsive layout
Vue Apex Charts
Simple login / logout
Error page
Styled Vuetify components like buttons, modals, etc

Pages

We have implemented some basic pages, so you can see our template in action.

Dashboard sample
Typography
Tables
Notifications
Charts
Icons
Maps
Chat
Login
Error page

Instalation

Clone repository

git clone https://github.com/flatlogic/material-vue.git

Get in the project folder

cd material-vue

Install dependencies via npm or yarn

yarn

Quick start

Run development server

yarn serve

Support

For any additional information please refer to Flatlogic homepage.

How can I support developers?

Star our GitHub repo ⭐
Tweet about it.
Create pull requests, submit bugs, suggest new features or documentation updates 🔧
Follow @flatlogic on Twitter.
Subscribe to Flatlogic newsletter at flatlogic.com
Like our page on Facebook 👍

More from Flatlogic

Awesome Bootstrap Checkboxes & Radios - ✅ Pure css way to make inputs look prettier
React Native Starter - 🚀 A powerful react native starter template that bootstraps development of your mobile application
React Dashboard - 🔥 React Dashboard - isomorphic admin dashboard template with GraphQL
Sing App - 💥 Free and open-source admin dashboard template built with Bootstrap 4
Light Blue Dashboard - 💦 Free and open-source (no frameworks) admin dashboard template built with Bootstrap

Premium themes

Looking for premium themes and templates? Check out our other template at flatlogic.com.

Download Details:

Author: flatlogic

Demo: https://flatlogic.github.io/material-vue/#/login

Source Code: https://github.com/flatlogic/material-vue

#vuejs #vue #javascript #vue-js

DashboardKit - Bootstrap 5 Admin Template

DashboardKit Bootstrap 5 Admin Template

Free Download - download

Premium - click here

Live Preview – Video

Embed Video –
<iframe width="560" height="315" src="https://www.youtube.com/embed/X1EpcZXcD6A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Preview Product Demo

Why DashboardKit?
DashboardKit is a Bootstrap 5 based Admin Template that comes with 170+ ready to use conceptual pages. We have made DashboardKit a really powerful backend template with having tons of UI components, form elements, charts, tables along with 7+ admin panels.
• Developer centric : Even a novice developer can customize the DashboardKit. Our code is readable and well optimized for any level of developer.
• Modern design : User experience is the major important part in DashboardKit. We’ve designed each page with conceptual user interface.
• Performance first : Code is handwritten from scratch & doing that we’ve achieved the best performance in DashboardKit.
• Well documented : Detailed documentation guide contains- Quick setup, Integrate into an existing project, How to use components, references, and changelog.
• Responsive : DashboardKit’s design renders fast & perfect on desktop, tablet & mobile without any lagging issue.
• Browsers Compatiblity : DashboardKit is well tested in Chrome, Firefox, Safari(macOS) , Edge & Internet Explorer(>=IE11).
• Regular updates : Any bug fixes, new features, improvements in DashboardKit will always free.
• Support : You can submit us the issues or any new feature request via our email support dashboardkit[at]gmail[dot]com.

Technology Stack
• Bootstrap : Most popular design framework for developing responsive and mobile-first websites.
• Sass : Sass is a preprocessor scripting language that is interpreted or compiled into CSS.
• npm/Gulp : Node Package Manager with Gulp build system for the fast development.

Features
DashboardKit free Bootstrap 5 admin template includes the basic layouts with below listed pages. For more features, please checkout pro version.

• Analytics Dashboard
• All Basic Bootstrap components
• 250+ Feather Icons
• Form Elements
• Bootstrap Basic Table
• Apex charts
• Google Map
• Login/Registration Pages
• Sample Page

We Solved your pain points?
You have seen lots of other admin templates but Is it really convenient for you? Has it resolve all your below pain points? We’re closely working on dashboard making since 2013 & we know the real pain points of our customer base.
• Hassle to start : Quickstart guide for start with DashboardKit. We also cover how to implement DashboardKit into your existing project with minimal effort. Guide for Quickstart
• Hard code structure : DashboardKit has a fully structured code with a well-commented guide that helps to ease your development.
• Hard to buid : We used Gulp build process for minification of CSS/Javascript files, the flexibility of repetitive workflows and compose them into efficient build pipelines. Check our Gulp helper guide.
• Components useability : You can easily access & use the DashboardKit’s all components using one-click code copy/paste mechanism. It will surely save your time.
• Responsive issues : Proper bug-free responsive design is a key factor for any project. DashboardKit is well optimized for that.
• Messy documentation : Simple easy to understand Documentation covers all aspects of setup, components guide, reference links, changelog.

Upgrated to Pro DashboardKit
For more Pages, UI components, forms variants & access to 7+ admin panels check out the Premium version of DashboardKit Bootstrap 5 Admin Template.

Documentation
DashboardKit documentation helps you in all aspects related to setup, how to use components, plugins references & changelog. Please refer this link.

Support
For support please contact us on dashboardkit[at].gmail[dot]com.

#dashboardkit #bootstrap 5 admin template #bootstrap admin template #admin dashboard #admin template #bootstrap

Luna Mosciski

1600583123

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.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Ahebwe Oscar

1620177818

Django admin full Customization step by step

Welcome to my blog , hey everyone in this article you learn how to customize the Django app and view in the article you will know how to register and unregister models from the admin view how to add filtering how to add a custom input field, and a button that triggers an action on all objects and even how to change the look of your app and page using the Django suit package let’s get started.

Database

Custom Titles of Django Admin

Exclude in Django Admin

Fields in Django Admin

#django #create super user django #customize django admin dashboard #django admin #django admin custom field display #django admin customization #django admin full customization #django admin interface #django admin register all models #django customization

Uttam Kumar Dash

1652360844

Best Free VueJS Admin Templates 2022

Are you looking for some of the best free VueJS admin dashboard templates? Look! In this blog, we give you a list of the best of them from 2022.

Admin dashboards are advantageous to any company. A Vue dashboard allows you to easily see how your company is performing. You may, for example, easily monitor and measure performance and metrics in real-time. Furthermore, it will help you build your business without spending time.

These new free templates include the ability to configure your dashboard. With all of the necessities. So, instead of wasting time creating your own, check out these free ones and get started on your next out-of-the-box admin dashboard.

Vue File Upload Using vue-dropzone Tutorial

In this tutorial, I will show you how to upload a file in Vue using vue-dropzone library. For this example, I am using Vue.js 3.0. First, we will install the Vue.js using Vue CLI, and then we install the vue-dropzone library. Then configure it, and we are ready to accept the file. DropzoneJS is an open source library that provides drag and drops file uploads with image previews. DropzoneJS is lightweight doesn’t depend on any other library (like jQuery) and is highly customizable. The vue-dropzone is a vue component implemented on top of Dropzone.js. Let us start Vue File Upload Using vue-dropzone Tutorial.

Dropzone.js is an open-source library providing drag-and-drop file uploads with image previews. DropzoneJS is lightweight, doesn’t depend on any other library (like jQuery), and is highly customizable.

The vue-dropzone is a vue component implemented on top of Dropzone.js.

First, install the Vue using Vue CLI.

Step 1: Install Vue.js using Vue CLI.

Go to your terminal and hit the following command.

npm install -g @vue/cli
         or
yarn global add @vue/cli

If you face any error, try running the command as an administrator.

Now, we need to generate the necessary scaffold. So type the following command.

vue create vuedropzone

It will install the scaffold.

Open the project in your favorite editor. Mine is Visual Studio Code.

cd vuedropzone
code .

Step 2: Install vue-dropzone.

I am using the Yarn package manager. So let’s install using Yarn. You can use NPM, also. It does not matter.

yarn add vue2-dropzone

or

npm install vue2-dropzone

Okay, now we need to add one css file with the above package. Now, vue cli uses css loader, so we can directly import in the src >> main.js entry file.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

import 'vue2-dropzone/dist/vue2Dropzone.css'

If importing css is not working for you, then you need to install that CSS file manually.

Copy this vue2Dropzone.css file’s content.

Create one file inside the src >> assets folder, create one css file called vuedropzone.css and paste the content there.

Import this css file inside src >> App.vue file.

<style lang="css">
  @import './assets/vuedropzone.css';
</style>

Now, it should include in our application.

Step 3: Upload an Image.

Our primary boilerplate has one ready-made component called HelloWorld.vue inside src >> components folder. Now, create one more file called FileUpload.vue.

Add the following code to FileUpload.vue file.

// FileUpload.vue

<template>
  <div id="app">
    <vue-dropzone id="upload" :options="config"></vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  data: () => ({
    config: {
      url: "https://appdividend.com"
    }
  }),
  components: {
    vueDropzone
  }
};
</script>

Here, our API endpoint is https://appdividend.com. It is the point where we will hit the POST route and store our image, but it is my blog’s homepage, so it will not work anyway. But let me import this file into App.vue component and see what happens.

// App.vue

<template>
  <div id="app">
    <FileUpload />
  </div>
</template>

<script>
import FileUpload from './components/FileUpload.vue'

export default {
  name: 'app',
  components: {
    FileUpload
  }
}
</script>

<style lang="css">
  @import './assets/vuedropzone.css';
</style>

Now, start the development server using the following command. It will open up URL: http://localhost:8080.

npm run serve

Now, after uploading the image, we can see that the image upload is failed due to the wrong POST request endpoint.

Step 4: Create Laravel API for the endpoint.

Install the Laravel.

After that, we configure the database in the .env file and use MySQL database.

We need to create one model and migration file to store the image. So let us install the following command inside the Laravel project.

php artisan make:model Image -m

It will create both the Image model and create_images_table.php migrations file.

Now, open the migrations file and add the schema to it.

// create_images_table.php

public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->string('image_name');
            $table->timestamps();
        });
    }

Now, migrate the database table using the following command.

php artisan migrate

It creates the table in the database.

Now, we need to add a laravel-cors package to prevent cross-site-allow-origin errors. Go to the Laravel root and enter the following command to install it.

composer require barryvdh/laravel-cors

Configure it in the config >> app.php file.

Barryvdh\Cors\ServiceProvider::class,

Add the middleware inside app >> Http >> Kernel.php file.

// Kernel.php

protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\TrustProxies::class,
        \Barryvdh\Cors\HandleCors::class,
];

Step 5: Define the API route and method to store the image.

First, create an ImageController.php file using the following command.

php artisan make:controller ImageController

Define the store method. Also, create one images folder inside the public directory because we will store an image inside it.

Right now, I have written the store function that handles one image at a time. So do not upload multiple photos at a time; otherwise, it will break.

// ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Image;

class ImageController extends Controller
{
    public function store(Request $request)
    {
       if($request->file('file'))
       {
          $image = $request->file('file');
          $name = time().$image->getClientOriginalName();
          $image->move(public_path().'/images/', $name); 
        }

       $image= new Image();
       $image->image_name = $name;
       $image->save();

       return response()->json(['success' => 'You have successfully uploaded an image'], 200);
     }
}

Go to the routes >> api.php file and add the following route.

// api.php

Route::post('image', 'ImageController@store');

Step 6: Edit FileUpload.vue component.

We need to add the correct Post request API endpoint in FileUpload.vue component.

// FileUpload.vue

<template>
  <div id="app">
    <vue-dropzone id="drop1" :options="config" @vdropzone-complete="afterComplete"></vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  data: () => ({
    config: {
      url: "http://localhost:8000/api/image",
      
    }
  }),
  components: {
    vueDropzone
  },
  methods: {
    afterComplete(file) {
      console.log(file);
    }
  }
};
</script>

Now, save the file and try to upload an image. If everything is okay, then you will be able to save the image on the Laravel web server as well as save the name in the database as well.

You can also verify on the server side by checking the database entry and the images folder in which we have saved the image.

Step 7: More vue-dropzone configuration.

The only required options are url, but there are many more you can use.

For example, let’s say you want:

A maximum of 4 files
2 MB max file size
Sent in chunks of 500 bytes
Set a custom thumbnail size of 150px
Make the uploaded items cancelable and removable (by default, they’re not)

export default {
  data: () => ({
    dropOptions: {
      url: "https://httpbin.org/post",
      maxFilesize: 5, // MB
      maxFiles: 5,
      chunking: true,
      chunkSize: 400, // Bytes
      thumbnailWidth: 100, // px
      thumbnailHeight: 100,
      addRemoveLinks: true
    }
  })
  // ...
}

Happy Coding !!!

Originally published at https://appdividend.com

#vue #vue-dropzone #vue.js #dropzone.js #dropzonejs #vue cli