Bertrand  Upton

Bertrand Upton

1664198220

Simple Editor: Simple, Lightweight, and Fast Editor Written in Nuxtjs

Simple Editor [TECHNICAL PREVIEW]

  • This is a technical preview of the project, it is not ready for production use. (See Roadmap)

What is it?

  • Simple Editor is a simple (🀣), lightweight, and fast editor for the web It is written in NuxtJs. It is designed to be easy to use and easy to extend.

Features

  • Multiple files support πŸ§ͺ
  • Syntax highlighting 🎟️
  • Easy to use (🀣) πŸ§ͺ
  • Easy to extend 🎟️
  • File editor 🎟️
  • File explorer 🎟️
  • Notifications πŸ§ͺ

Legend: πŸ§ͺ - In development (Is available in preview), 🎟️ - Planned

Roadmap

  •  Multiple files support
  •  Syntax highlighting
  •  Easy to use (🀣)
  •  Easy to extend
  •  File editor
  •  File explorer
  •  Notifications

Contributing

  • If you have any ideas, feel free to open an issue or a pull request. If you want to contribute, please read the Contributing file.

License

  • This project is licensed under the MIT License - see the LICENSE file for details

Motivation

  • I wanted to create a simple editor for the web, that is easy to use and easy to extend. I also wanted to learn NuxtJs, so I decided to create this project.

UI

Home Editor File-Create-Moda Context-Menu Notifications


Download Details:

Author: Vladimir-Urik
Source Code:  https://github.com/Vladimir-Urik/editor

License: MIT license

#vue #vuejs 

Simple Editor: Simple, Lightweight, and Fast Editor Written in Nuxtjs

Getting Started with VueJS

Getting started with VueJS. Learn the essentials of modern web application development using Vue 3. 

You'll learn:

  • Learn to create well-written reactive Vue apps from scratch
  • Learn to use the new Vue 3 Composition API
  • Learn to use Vue for creating Single Page Applications
  • Learn where to place Vue in the web ecosystem
  • Learn the Vue design patterns
  • Learn to manage your global state with Vuex

 

Vue.js is an elegant and lightweight JavaScript framework which you can use everything from small reactive web components to full fledged single page web applications


During this course I will teach you:

  •    The essentials of the Vue.js framework
  •    How to use Vue.js its special directives
  •    Hooking into Vue.js its life cycle methods
  •    Conditionally rendering parts of you Vue.js templates


About Vue.js

Vue.js is one of the more popular frameworks for building interactive web applications. It was created by Evan You while he was working at Google, being inspired (and frustrated) by Angular.

The JavaScript framework was popularised by the Laravel community. And has gotten a long way since then. It has all the features you need for building modern web applications and has a rich landscape of plugins in the Vue ecosystem that enable fast development.


Requirements

  •    Basic knowledge about JavaScript, CSS and HTML is assumed
  •    Knowing how to navigate in your terminal shell
  •    Knowlegde about your own operating system
  •    Knowledge about NPM and ES6 will be a useful

Who this course is for:

  •    Beginning web developers who want to develop interactive websites
  •    JavaScript developers looking for an alternative to React or Angular
  •    Software developers looking to improve web development skills
  •    Laravel developers who want to deepen their knowledge on Vue


#vue #vuejs #javascript

Getting Started with VueJS

How to Create Fast 3D Hover Effects with VueUse

In this video, we will learn how to create fast 3D hover effects with VueUse

VueUse is a collection of utility functions based on Composition API, working for Vue 2 and 3. It's inspired by react-use. This package aims to provide a fast and clean way to use the Vue Composition API.

Subscribe: https://www.youtube.com/c/LearnVue/featured 

 

 

Source Code 

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useMouseInElement } from '@vueuse/core'
const target = ref(null)
const { elementX, elementY, isOutside, elementHeight, elementWidth } =
  useMouseInElement(target)
const cardTransform = computed(() => {
  const MAX_ROTATION = 6
  const rX = (
    MAX_ROTATION / 2 -
    (elementY.value / elementHeight.value) * MAX_ROTATION
  ).toFixed(2) // handles x-axis
  const rY = (
    (elementX.value / elementWidth.value) * MAX_ROTATION -
    MAX_ROTATION / 2
  ).toFixed(2) // handles y-axis
  return isOutside.value
    ? ''
    : `perspective(${elementWidth.value}px) rotateX(${rX}deg) rotateY(${rY}deg)`
})
</script>
<template>
  <div
    class="w-full p-8 rounded shadow-2xl bg-charcoal-600 card"
    ref="target"
    :style="{
      transform: cardTransform,
      transition: 'transform 0.25s ease-out'
    }"
  >
    <h1 class="mb-2 text-2xl font-bold">B.S. Meeting Notes πŸ₯΄</h1>
    <section class="flex items-center">
      <img
        src="https://learnvue.co/img/matt-maribojoc.png"
        class="w-8 h-8 mr-4 rounded"
      />
      <h2 class="font-2xl">@mattmaribojoc</h2>
    </section>
    <p class="mt-4">
      Organic growth beef up, and shotgun approach note for the previous submit:
      Can you ballpark the cost per unit for me. Conversational content reach
      out, what's the status on the deliverables for eow?
    </p>
  </div>
</template>

<style scoped>
/* .card {
  transform: v-bind(cardTransform);
  transition: transform 0.25s ease-out;
} */
</style>

#vuejs #vue #javascript #webdev

How to Create Fast 3D Hover Effects with VueUse

Vue Slots Simplified for Beginners

Slots are another way in Vue for a component to inject content into a child component. This does this using template code.

In this video, we'll take a look at the basics of Vue slots, using scoped slots to pass data between components, named slots, and so much more.


IMAGES USED
placeholder image - https://i.stack.imgur.com/y9DpT.jpg 
cute pic of me :) - https://learnvue.co/wp-content/uploads/2021/05/Screen-Shot-2021-05-04-at-3.20.28-PM-300x280.png 

Subscribe: https://www.youtube.com/c/LearnVue/featured 

#vue #vuejs 

Vue Slots Simplified for Beginners

Build a Catalog of Popular Web Movies with Vue.js

Hi! Welcome to my project, this is actually a web developer challenge that I'm doing for a job aplication!

In that case, if You're the person that evaluate this aplication I hope You find everything that was asked of me and with any questions please send an email.

And in case You just happen to stumble throught here, feel free to see what I've had the pleasure of building πŸ€—

Project Description

This project is a web popular movies catalogue. In here You can move trought most popular movies in the day, search for any specific favorite and see the information about them!

For this project I used the The Movie Database API to get all information I needed, integrated with technology of Vue.JS CLI, used the CSS's framework Vuetify and Boostrap and applied all of the steps made with Git on Github.

See the completed project here: http://movieapp-thuany.surge.sh/

Project setup

First step to have this code on your local system:

1: Install this code on your local system

Fork this repository (click 'Fork' button in top right corner)

Clone the forked repository on your local file system

cd /path/to/install/location

git clone https://github.com/[your_username]/movie.git

2: Change into directory

cd movie

3: Install dependencies

npm install

4: Create a .env file by copying the sample

cp .env_sample .env

Edit the .env file and replace any variables if needed

5: Start project

npm run start

Your site will be available at localhost:[PORT] where PORT is whatever value is set in your .env file.

Download Details:
 

Author: Thurunany
Download Link: Download The Source Code
Official Website: https://github.com/Thurunany/movie 
#vue #vuejs 

Build a Catalog of Popular Web Movies with Vue.js
Zachary Palmer

Zachary Palmer

1663729451

Building Your Own UI (User Interface) with Vue.js

Learn Vue.js in this complete course for beginners by building your own UI (User Interface) with Vue

 

Welcome to the beginners course of Vue.js. Vue - is one of most popular JS frameworks that using for building user interfaces. This framework have easy syntax and structure. So you will not have problems with learning this technology. In this course you will learn how to build your own UI by using this framework.


First we gonna create our first Vue instance, after this we gonna learn what is events in Vue and how we can use. Also here in this course we gonna talk about Vue CLI, and create Vue apps by npm. This is really cool feature from Vue. Because after this we can build Vue apps and host it - on Node.js server. Maybe many people know that this framework have also cool plugins that can help you to get some features when you developing your app. In this course we gonna install Vue router plugin to make routing in our app. Here also is full plan of course:


1. Installing of Vue.js

2. Hello world - Example

3. Directivies in Vue.js

4. Conditions and v-if

5. Loops and v-for

6. Components in Vue instance

7. Refs

8. Events

9. Event Modifiers

10. Keyboard Events

11. Dynamic CSS classes

12. Templating

13. Forms

14. Vue CLI

15. Vue CLI Project structure

16. Working with other instances

17. Nested components

18. Component Props

19. Events (from parent to child)

20. Lifecycle hooks

21. Slots

Who this course is for:

  •    Beginners in JavaScript
  •    Beginners in Vue

#vue #javascript #vuejs

Building Your Own UI (User Interface) with Vue.js
Jade Bird

Jade Bird

1663204687

Full Stack Application with Azure SQL, NodeJS & Prisma

Learn: Full Stack Application with Azure SQL & Prisma in this tutorial
Come along with us to create a scalable, resilient and robust Full Stack application using the main stacks, such as:

βœ… Node.Js
βœ… Prisma
βœ… Azure SQL
βœ… Azure Functions
βœ… Azure Static Web Apps & GitHub Actions

πŸ“• Course Structure πŸ“•

βœ… Module 01 - Prisma Fundamentals
βœ… Module 02 - Azure SQL Fundamentals
βœ… Module 03 - Azure Static Web Apps Fundamentals
βœ… Module 04 - Dev Tools
βœ… Module 05 - Application Development
βœ… Module 06 - Next Steps

In this course, you'll learn about:

  1. Course Overview | Learn: A Full Stack Application with Azure SQL & Prisma for Beginners
  2. Learning Objectives | A Full Stack Application with Azure SQL & Prisma for Beginners
  3. What is Prisma? | Learn: A Full Stack Application with Azure SQL & Prisma for Beginners
  4. Why Should we use Prisma? | A Full Stack Application with Azure SQL & Prisma for Beginners
  5. Key Concepts about Prisma | A Full Stack Application with Azure SQL & Prisma for Beginners
  6. Important Resources & Recap | Full Stack Application with Azure SQL & Prisma for Beginners
  7. Module 02: Overview | Learn: Full Stack Application with Azure SQL & Prisma for Beginners
  8. What is Azure SQL? | Learn: Full Stack Application with Azure SQL & Prisma for Beginners
  9. Why should we use Azure SQL? | Full Stack Application with Azure SQL & Prisma for Beginners
  10. Azure SQL Support in Prisma | Full Stack Application with Azure SQL & Prisma for Beginners
  11. Important Resources & Recap | Full Stack Application with Azure SQL & Prisma for Beginners
  12. Module 03: Overview | Learn: A Full Stack Application with Azure SQL & Prisma for Beginners
  13. What is Azure Static Web Apps? | Full Stack Application with Azure SQL & Prisma for Beginners
  14. Azure Static Web Apps Workflow | Full Stack Application with Azure SQL & Prisma for Beginners
  15. Why should we use ASWA? | Full Stack Application with Azure SQL & Prisma for Beginners
  16. Frameworks we can use with ASWA | Full Stack Application with Azure SQL &Prisma for Beginners
  17. Important Resources & Recap | Full Stack Application with Azure SQL & Prisma for Beginners
  18. Dev Tools Overview & Installation | Full Stack Application w/ Azure SQL &Prisma for Beginners
  19. Configuring .devContainer folder | Full Stack Application w/ Azure SQL & Prisma for Beginners
  20. Important Resources & Recap | Full Stack Application with Azure SQL & Prisma for Beginners
  21. Application Overview | A Full Stack Application with Azure SQL & Prisma for Beginners
  22. Forking the Front-End Application | Full Stack Application w/ Azure SQL &Prisma for Beginners
  23. Structuring the Back-End Project | Full Stack Application w/ Azure SQL & Prisma for Beginners
  24. Creating Database Server | Full Stack Application with Azure SQL & Prisma for Beginners
  25. Creating Database | Learn: A Full Stack Application with Azure SQL & Prisma for Beginners
  26. Creating Shadow Database | Full Stack Application with Azure SQL & Prisma for Beginners
  27. Install packages | Learn: Full Stack Application with Azure SQL & Prisma for Beginners
  28. Modeling Database with Prisma | Full Stack Application with Azure SQL & Prisma for Beginners
  29. Using Prisma Migrations | Full Stack Application with Azure SQL & Prisma for Beginners
  30. Using Prisma Studio | Learn: Full Stack Application with Azure SQL & Prisma for Beginners
  31. Developing 'CreateEmployee' | Full Stack Application with Azure SQL & Prisma for Beginners
  32. Developing 'GetEmployees' | A Full Stack Application with Azure SQL & Prisma for Beginners
  33. Developing 'GetEmployee' | A Full Stack Application with Azure SQL & Prisma for Beginners
  34. Developing 'UpdateEmployee' | Full Stack Application with Azure SQL & Prisma for Beginners
  35. Developing 'DeleteEmployee' | Full Stack Application with Azure SQL & Prisma for Beginners
  36. Deploying the App with ASWA | Full Stack Application with Azure SQL & Prisma for Beginners
  37. Next Steps | Learn: A Full Stack Application with Azure SQL & Prisma for Beginners

Course Overview [1 of 37] | Learn: A Full Stack Application with Azure SQL & Prisma for Beginners

Learning Objectives [2 of 37] | A Full Stack Application with Azure SQL & Prisma for Beginners

In this video we will see the learning objectives of the Prisma Fundamentals module!

What is Prisma? [3 of 37] | Learn: A Full Stack Application with Azure SQL & Prisma for Beginners

In this video we will learn what is Prisma.

Why Should we use Prisma? [4 of 37] | A Full Stack Application with Azure SQL & Prisma for Beginners

In this video we will learn why we should use Prisma, which has been considered a powerful ORM for JavaScript Developers.

Key Concepts about Prisma [5 of 37] | A Full Stack Application with Azure SQL & Prisma for Beginners

In this video we will learn the main pillars around the Prisma!

Important Resources & Recap [6 of 37] | Full Stack Application with Azure SQL & Prisma for Beginners

Recap on what we learned and how you can dig deeper into Prisma.

Module 02: Overview [7 of 37] | Learn: Full Stack Application with Azure SQL & Prisma for Beginners

In this video you will see what will learn during the Module 02 about Azure SQL.

What is Azure SQL? [8 of 37] | Learn: Full Stack Application with Azure SQL & Prisma for Beginners

In this video you will understand what is Azure SQL and the different options like: Single Database and Elastic Pool.

Why should we use Azure SQL? [9 of 37]| Full Stack Application with Azure SQL & Prisma for Beginners

In this video you will understand why is so important to use Azure SQL in your projects!

Azure SQL Support in Prisma [10 of 37]| Full Stack Application with Azure SQL & Prisma for Beginners

In this video we will show you that Azure SQL has a perfect fit with Prisma!

Important Resources & Recap [11 of 37]| Full Stack Application with Azure SQL & Prisma for Beginners

Recap on what we learned and how you can dig deeper into Azure SQL.

Module 03: Overview [12 of 37] Learn: A Full Stack Application with Azure SQL & Prisma for Beginners

In this video you will see what will learn during the Module 03 about Azure Static Web Apps.

What is Azure Static Web Apps? [13of37] Full Stack Application with Azure SQL & Prisma for Beginners

In this video we will learn what is Azure Static Web Apps.

Azure Static Web Apps Workflow [14of37] Full Stack Application with Azure SQL & Prisma for Beginners

In this video we will understand under the hood how the Azure Static Web Apps workflow works.

Why should we use ASWA? [15 of 37] | A Full Stack Application with Azure SQL & Prisma for Beginners

In this video we will understand the benefits to use Azure Static Web Apps!

Frameworks we can use with ASWA [16of37] Full Stack Application with Azure SQL &Prisma for Beginners

In this video we will see that can use Azure Static Web Apps with different libs and the most popular frameworks!

Important Resources & Recap [17 of 37]| Full Stack Application with Azure SQL & Prisma for Beginners

Recap on what we learned and how you can dig deeper into Azure Static Web Apps.

Dev Tools Overview & Installation [18of37] Full Stack Application w/ Azure SQL &Prisma for Beginners

In this video we are going to install all the necessary dev tools that we will go into need to develop our application in the BackEnd side.

Configuring .devContainer folder [19of37] Full Stack Application w/ Azure SQL & Prisma for Beginners

In this video we will understand the importance around to create a .devContainer folder in any project and a little overview about it!

Important Resources & Recap [20 of 37] Full Stack Application with Azure SQL & Prisma for Beginners

Recap what we saw during the module 04 and preparing for what is coming!

Application Overview [21 of 37] | A Full Stack Application with Azure SQL & Prisma for Beginners

In this video we will take a first look around the BackEnd application that we are going to build!

Forking the Front-End Application [22of37] Full Stack Application w/ Azure SQL &Prisma for Beginners

In this video we are going to forking/cloning the Front-End starter project!

Structuring the Back-End Project [23of37] Full Stack Application w/ Azure SQL & Prisma for Beginners

In this video we are going to structuring the BackEnd project using Azure Functions.

Creating Database Server [24 of 37] | Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to create our Database Server using the Azure Portal.

Creating Database [25 of 37] | Learn: A Full Stack Application with Azure SQL & Prisma for Beginners

Now we already created our Database server, it's time to create our Employee Database using Azure Portal. 

Creating Shadow Database [26 of 37] | Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to create shadow database using Azure Portal.

Install packages [27 of 37] | Learn: Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to install all the necessary packages for our project!

Modeling Database with Prisma [28of37] Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to learn how to initialize and modeling our database using Prisma.

Using Prisma Migrations [29 of 37] | Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to understand how Prisma migrations works!

Using Prisma Studio [30 of 37] | Learn: Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to take a look how Prisma Studio works and use it to manipulate our database.

Developing 'CreateEmployee' [31 of 37] Full Stack Application with Azure SQL & Prisma for Beginners

In this video we're going to create our first function: Create Employee using Prisma & Azure Functions

Developing 'GetEmployees' [32 of 37] A Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to develop the functionality to list all the employees using Azure Functions.

Developing 'GetEmployee' [33 of 37] A Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to develop the functionality to return an employee by Id using Azure Functions.

Developing 'UpdateEmployee' [34 of 37] Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to develop the functionality to update an employee by Id using Azure Functions.

Developing 'DeleteEmployee' [35 of 37] Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to develop the functionality to delete an employee by Id using Azure Functions

Deploying the App with ASWA [36 of 37] Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to deploy our application using Azure Static Web Apps with GitHub Actions Integration!

Next Steps [37 of 37] | Learn: A Full Stack Application with Azure SQL & Prisma for Beginners

In this video we are going to see the next steps that you should see after this course!

⭐️ GitHub repository: https://github.com/glaucia86/azure-sql-prisma-vue 

πŸ’» Important Resources & Links Importantes & Links πŸ’»

βœ… Build serverless, full stack applications in Azure - Free Course: https://aka.ms/fullstack-mslearn-course 
βœ… Azure SQL Documentation: https://aka.ms/azuresql-official-documentation   
βœ… Microsoft Learn [Free Course] - Azure Static Web Apps: https://aka.ms/mslearn-aswa-course 
βœ… Microsoft Learn [Free Course] - Build Serverless APIs with Azure Functions: https://aka.ms/azurefunctions-msleanr-course  
βœ…  Prisma Official Website: https://www.prisma.io/ 
βœ…  Official Prisma Documentation: https://www.prisma.io/docs/ 
βœ… Articles & Updates about Prisma: https://www.prisma.io/blog/   
βœ… Prisma Community: https://www.prisma.io/community 
 

#azure #azuresql #azurefunctions #prisma #nodejs #javascript #crudapplication #aswa #vuejs, #webdevelopment #tutorial #programming #coding #fullstackapplication

Full Stack Application with Azure SQL, NodeJS & Prisma

Learn Nuxt 3 - The Hybrid Vue Framework

Learn Nuxt 3, the hybrid Vue framework in this course for beginners. Learn Nuxtjs with all its new features in the Nuxt3 application.

Build your next application with Vue 3 and experience hybrid rendering, powerful data fetching and new features. Nuxt 3 is an open source framework making web development simple and powerful.

🌟 Course Contents 🌟
⏳ (00:00:00) Intro to course
⏳ (00:06:58) What is Nuxt3
⏳ (00:11:20) Installation
⏳ (00:16:16) Explore Project 
⏳ (00:22:28) Auto Import
⏳ (00:28:14) Components Directory
⏳ (00:36:03) Dynamic components & import
⏳ (00:48:02) Routing
⏳ (00:55:00) Page Navigation
⏳ (00:59:59) Layouts
⏳ (01:11:46) Dynamic Routes
⏳ (01:18:12) Tailwindcss Assets
⏳ (01:26:18) Public Directory
⏳ (01:36:57) Head Management
⏳ (01:48:42) Composables
⏳ (02:03:20) Fetch Data
⏳ (02:13:58) Auth State
⏳ (02:23:20) 3 Kinds of Middleware
⏳ (02:35:13) Server Routes
⏳ (02:43:32) Deploy to Netlify

Source Code: https://github.com/bitfumes/nuxt3-course-2022

#nuxt #nuxtjs #vue #vuejs 

Learn Nuxt 3 - The Hybrid Vue Framework

Upload Images to Remote Server with Vue 3

v-upload-image

A simple UI component to upload images to a remote server, created with Vue 3.

A common approach to handle images is to store them on a database and then store the URL to access the image and other data on a different database. This component is designed specifically for that use case.

Installation

Install via NPM:

npm i v-upload-image

Or via YARN:

yarn add v-upload-image

Features

  • Drag/drop to upload images
  • Preview uploaded images
  • Double-click to remove uploaded images

Getting Started

Import the component and use it in your Vue component template as follows.

import UploadImage from "v-upload-image";
<upload-image
  :processImage="customProcessImage"
  :removeImage="customRemoveImage"
  @update-urls="customHandleUpdatedUrls"
></upload-image>

In order to upload images to a server, it's necessary to define some functions to use as component props:

processImage : Takes an async function that receives an image (an object of Javascript File interface) and uploads the image to a server. This function should return an object that contains imageId and imageUrl properties. Once the upload is completed, the image will appear in the preview area.

removeImage : Takes an async function that receives an image ID (returned from function passed to processImage above). This function is called when user double-clicks on a preview image to remove it. When the image has been deleted from server, it will be removed from preview area.

update-urls event : This event is emitted when the processing of images is finished. The emitted event contains the list of image urls, each of which is returned from the function passed to processImage prop.

Example Usage

Product images for an e-commerce site are stored on Firebase Cloud Storage in the example below. The URLs returned from Firebase are then stored along with other product data in a different database.

// Pass to `processImage` prop
async uploadImageToFirebase(image) {
    const imageId = uuidv4();
    const storageRef = firebaseRef(firebaseStorage, imageId);
    await uploadBytes(storageRef, image);
    const downloadUrl = await getDownloadURL(storageRef);
    return { imageId: imageId, imageUrl: downloadUrl };
}
// Pass to `removeImage` prop
async removeImageFromFirebase(imageId) {
    const storageRef = firebaseRef(firebaseStorage, imageId);
    await deleteObject(storageRef);
}
// Handler for `update-urls` event
handleUpdatedUrls(urlsList) {
    this.product.imageUrls = urlsList;
}

Improvement

We plan to bundle the Vue components so that this package can be used directly in browser.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Download Details:
 

Author: minhieuchu
Download Link: Download The Source Code
Official Website: https://github.com/minhieuchu/v-upload-image 
License: MIT License

#vue #vuejs 

Upload Images to Remote Server with Vue 3

Multiple Modals Can Pop Up Orderly with Vue 3

usemodal-vue3

An easy-to-use Modal for Vue 3. Multiple modals can pop up orderly.

DEMO

Install

npm i usemodal-vue3

CDN

https://www.unpkg.com/usemodal-vue3

Usage

import { ref } from 'vue';
import { Modal } from 'usemodal-vue3';

let isVisible = ref(false);

<Modal v-model:visible="isVisible">
    <div>your content...</div>
</Modal>

Your page may need to pop up multiple modals, and different modals may depend on different data sources, sometimes even asynchronously, you can easily manage their popup order.

import { reactive } from 'vue';
import { useModal, Modal } from 'usemodal-vue3';

const setModal = useModal({
    m1: 2, // The larger the number, the later in the order
    m2: 1 // Smaller numbers, first in order
});

let modalVisible = reactive({});

modalVisible = setModal('m1', true);

setTimeout(() => {
    // or  modalVisible = setModal('m2', false)
    modalVisible = setModal('m2', true); // either true or false, you have to define a state.
}, 2000)

function myCancel() {
    // do something....
     modalVisible = setModal('m2', false); // m2 is closed, while the other states are true in order
}

// m1 order is 2
<Modal name="m1" v-model:visible="modalVisible">
    <div>This modal will be displayed according to the status when the previous one is closed or the display status is fasle</div>
</Modal>
// m2 order is 1, will go first
<Modal name="m2" v-model:visible="modalVisible">
    <div>This modal will be displayed first</div>
</Modal>

If you need to use drag.

// draggable = true. By default, hold down the title part and drag
<Modal v-model:visible="true" :draggable="true">
    <div>...</div>
</Modal>

// You can customize the dragged part. Especially when 'type' is 'clean'
const handle = ref();

<Modal v-model:visible="true" :draggable="handle">
    <div ref="handle">You can hold here and drag</div>
</Modal>

Documentation

Props

paramsDescriptionTypeDefault
visible(v-model)Is the modal visible ?boolean 
nameRequired if there are multiple modals and there is an order problemstring 
maskWhether the mask is visiblebooleantrue
maskClosableWhether clicking on the mask can close the modalbooleantrue
typeType of the modal . 'clean' is customstring''
modalClassWhen you need to customize the style, you can modify the outermost classstring''
widthWidth of the modal. When the value is a number, the unit is pxstring|number500
offsetTopPosition from top. When the value is a number, the unit is pxstring|number100
zIndexz-indexnumber1000
titleTitle of the modalstring'Title'
animationWhether the animation pops upbooleantrue
closableWhether the close icon is visible or notbooleantrue
draggableIs it draggable? The default target is Header(Title), but you can also pass in an element(commonly used in type for 'clean')boolean|objectfalse
cancelButtonCancel button configuration: 
text: the text of the button.
onclick: Click callback function.
loading: Whether to display the loading animation after the button is clicked.
object{text: 'cancel', onclick: () => {}, loading: false}
okButtonOk button configuration: 
text: the text of the button.
onclick: Click callback function.
loading: Whether to display the loading animation after the button is clicked.
object{text: 'ok', onclick: () => {}, loading: false}

Event

eventDescriptioncallback params
onVisibleWhen the modal is displayed 
onUnVisibleWhen the modal is hidden 

github

usemodal-vue3

Download Details:
 

Author: usemodal-vue3
Download Link: Download The Source Code
Official Website: https://github.com/usemodal-vue3/usemodal-vue3 
License: MIT license

#vue #vuejs 

Multiple Modals Can Pop Up Orderly with Vue 3

Login And Register Sanctum Auth With Vuejs 3 and Laravel 9

In this video we are going to learn how to Login And Register Sanctum Auth With Vuejs 3  and Laravel 9;

Vue.js is a JavaScript framework for building user interfaces (UIs) and single-page applications (SPAs). Just like the best of them, Vue.js is open-source. It utilizes a model-view-viewmodel (MVVM) architectural pattern. 

Laravel is a free and open-source PHP framework that provides a set of tools and resources to build modern PHP applications. With a complete ecosystem leveraging its built-in features, and a variety of compatible packages and extensions, Laravel has seen its popularity grow rapidly in the past few years, with many developers adopting it as their framework of choice for a streamlined development process.


Github: https://github.com/share-tutorials-dev 

Subscribe: https://www.youtube.com/channel/UCgME7xUx_PrCdphF2k8bupg/featured 

#vuejs #laravel 

Login And Register Sanctum Auth With Vuejs 3 and Laravel 9
Anthony  Dach

Anthony Dach

1662758760

7 Best Vue Split Pane Layout for Developers

SplitPane is a component that makes it possible to create multi-view layout. Similar to iPad apps, SplitPane allows UI elements, like Menus, to be displayed as the viewport increases. If the devices screen size is below a certain size, the SplitPane will collapse and the menu will become hidden again.

In this article below, We'll share 7 Best Vue Split Pane Layout for Developers

  1. vue-multi-split-pane

A component based on Vue.js. Provides unlimited resizable pane support

Install

npm i vue-multi-split-pane

View Github

2.   splitpanes

A Vue 2 & 3 reliable, simple and touch-ready panes splitter / resizer.

Features

  • checkLight weight & no dependencies other than Vue JS
  • checkOnly worry about your panes, the splitters are automatic
  • checkNesting supported
  • checkFully responsive
  • checkSupport for touch devices
  • checkPush other panes or not
  • checkDouble click a splitter to maximize pane
  • checkProgrammatically set pane width or height
  • checkProgrammatically add and remove panes
  • checkSupports Vue 2 & Vue 3

Installation

Vue 3

npm i splitpanes

View Github

3.   vue-split-layout

Draggable split panes for vuejs

Install

npm install --save vue-split-layout

TODO

  •  Better way for naming views instead of their indexes
  •  Improve rendering, if a view state(props) is update outside layout, the view isn't updated
  •  Persist creating an change $emit with possibily the tree json (also for split)
  •  Makes views draggable from some menu so we can add new views

View Github

4.   Vue-Split-Panel

VueJS wrapper for the great Split.js library.

vue-split-panel examples - CodeSandbox
  • Fast: No overhead or attached window event listeners, uses pure CSS for resizing.
  • Compatible: Works great in IE9, and even loads in IE8 with polyfills. Early Firefox/Chrome/Safari/Opera supported too.

Installation

npm:

$ npm install --save vue-split-panel

View Github

5.   SplitView

Create a resizable split-view to partition the UI.

Install

npm i vue-split-view

View Github

Here are all 7 Best Vue Split Pane Layout for Developers in my opinion. If you find it interesting, please like and share to support

#vue #vuejs

7 Best Vue Split Pane Layout for Developers
Anthony  Dach

Anthony Dach

1662743640

7 Best Vue Grid Layout for Developers

Grid Layout offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

In this article below, We'll share 7 Best Vue Grid Layout for Developers

  1. ag-grid-community

AG Grid is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance, has no third-party dependencies and integrates smoothly with all major JavaScript frameworks.

Here's how our grid looks with multiple filters and grouping enabled:

Image of AG Grid showing filtering and grouping enabled.

Features

In addition to the standard set of features you'd expect from any grid:

  • Column Interactions (resize, reorder, and pin columns)
  • Pagination
  • Sorting
  • Row Selection

Here are some of the features that make AG Grid stand out:

  • Grouping / Aggregation *
  • Accessibility support
  • Custom Filtering
  • In-place Cell Editing
  • Records Lazy Loading *
  • Server-Side Records Operations *
  • Live Stream Updates
  • Hierarchical Data Support & Tree View *
  • Customizable Appearance
  • Customizable Cell Contents
  • State Persistence
  • Keyboard Navigation
  • Data Export to CSV
  • Data Export to Excel *
  • Excel-like Pivoting *
  • Row Reordering
  • Copy / Paste
  • Column Spanning
  • Pinned Rows
  • Full Width Rows
  • Integrated Charting
  • Sparklines

View Github

2.   tabulator-tables

Interactive Tables and Data Grids for JavaScript

Tabulator Table

Features

Tabulator allows you to create interactive tables in seconds from any HTML Table, Javascript Array or JSON formatted data.

Simply include the library and the css in your project and you're away!

Tabulator is packed with useful features including:

Tabulator Features

View Github

3.   gridstack.js

Build interactive dashboards in minutes.

Mobile-friendly modern Typescript library for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Has multiple bindings and works great with React, Vue, Angular, Knockout.js, Ember and others (see frameworks section).

Install

yarn add gridstack
// or
npm install --save gridstack

View Github

4.   vue-grid-layout

A draggable and resizable grid layout, for Vue.js.

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout

Features

  • Draggable widgets
  • Resizable widgets
  • Static widgets
  • Bounds checking for dragging and resizing
  • Widgets may be added or removed without rebuilding grid
  • Layout can be serialized and restored
  • Automatic RTL support (resizing not working with RTL on 2.2.0)
  • Responsive

View Github

5.   vue-easytable

πŸ‰ Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox …

Features

Base components

Install

npm install vue-easytable

or

yarn add vue-easytable

View Github

6.   @revolist/revogrid

Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance πŸ”‹

Material grid preview

Key Features

  • Millions of cells viewport with a powerful core in-build by default;
  • Keyboard support with excel like focus;
  • Super light initial starter . Can be imported with polifill or as module for modern browsers;
  • Intelligent Virtual DOM and smart rgRow recombination in order to achieve less redraws;
  • Sorting (multiple options, can be customized per column and advanced with events);
  • Filtering
    • Predefined system filters;
    • Preserve existing collection;
    • Custom filters (extend existing system filters with your own set);
  • Export to file;
  • Custom sizes per Column and Row;
  • Column resizing;
  • Autosize support (Column size based on content);
  • Pinned/Sticky/Freezed:
    • Columns (define left or right);
    • Rows (define top or bottom);
  • Grouping:
    • Column grouping (Nester headers);
    • Row grouping (Nested rows);
  • Cell editing;
  • Customizations:
    • Header template;
    • Cell template (build your own cell view);
    • Cell editor (apply your own editors and cell types);
    • Cell properties (build you own properties around rendered cells);
  • Column types;
    • Text/String (default);
    • Number;
    • Select;
    • Date;
    • Custom (take any type as template and create your own extended style);
  • Drag and drop rows;
  • Range operations:
    • Selection;
    • Edit;
  • Theme packages:
    • Excel like (default)
    • Material (compact, dark or light);
  • Copy/Paste (copy/paste from Excel, Google Sheets or any other sheet format);
  • Easy extenation and support with modern VNode features and tsx support;
  • Trimmed rows (hide rows on demand);
  • Plugin system (create your own plugins or extend existing one, it's transparent and easy);
  • Automated size calculation;
  • Hundred others small customizations and improvements RevoGrid.

Installation

The library published as a scoped NPM package in the NPMJS Revolist account. Check for more info on our demo side.

With NPM:

npm i @revolist/revogrid --save;

With Yarn:

yarn add @revolist/revogrid;

View Github

7.   vue-cheetah-grid

The fastest open-source data table for web.

capture.png

Downloading Cheetah Grid using npm

npm install -S cheetah-grid
import * as cheetahGrid from "cheetah-grid";

// or

const cheetahGrid = require("cheetah-grid");

View Github

Here are all 7 Best Vue Grid Layout for Developers in my opinion. If you find it interesting, please like and share to support

#vue #vuejs

7 Best Vue Grid Layout for Developers
Anthony  Dach

Anthony Dach

1662739020

4 Best Vue Container Layouts for Developers

Use layout containers to arrange the elements of your user interface. Stacks and grids update and adjust the positions of the child views they contain in response to changes in content or interface dimensions. You can nest layout containers inside other layout containers to any depth to achieve complex layout effects. You can also create a custom layout container by defining a type that conforms to the Layout protocol.

To fine tune the position, alignment, and other elements of a layout that you build with layout container views, use the view modifiers in Layout modifiers.

In this article below, We'll share 4 Best Vue Container Layouts for Developers

  1. vue-layout-system

A pack of Vue components that solve daily layout problems

Vue Layout System lets you intuitively arrange your components. Simply drop your contents into slots, configure options with props, Vue Layout system will take care of all CSS challenges for you.

With Vue Layout System developers are empowered to

  • Create various types of layout with much shorter developing time
  • Arrange contents faster in a intuitive and predictable way
  • Control space between contents precisely with system-wide consistency

Spacing System

Vue Layout System uses a finite set of spacing scales for all spacing needs, such as padding around the contents and gaps between contents. This is a vital foundation for consistent and precise control of the spacing.

The default spacing scales are integers from 0 to 10, You can easily customize the spacing scales by using either Sass variables or CSS custom properties. See more details in Customize.

Installation

npm install vue-layout-system

View Github

2.   vue-golden-layout

Golden layout integration in vue

Installation

npm i -S vue-golden-layout

Fast example

<golden-layout>
  <gl-row>
    <gl-component title="component1">
      <h1>Component 1</h1>
    </gl-component>
    <gl-stack>
      <gl-component title="component2">
        <h1>Component 2</h1>
      </gl-component>
      <gl-component title="component3">
        <h1>Component 3</h1>
      </gl-component>
    </gl-stack>
  </gl-row>
</golden-layout>

Note: each component who is not rendered in a stack will indeed be rendered in a golden-layout singleton stack.

View Github

3.   vue-mobile-container

A Vue.js mobile container

Install

NPM

$ npm install vue-mobile-container

View Github

4.   vue-form-container

A Provider Component that encapsulate your forms and handle their states and validations. Under the hood it uses valite, a light and concise validator engine that works on asynchrony. The idea of having a component handling the states and validations of the forms I took from formik and vue-final-form.

Installation

This library is published in the NPM registry and can be installed using any compatible package manager.

npm install --save vue-form-container

# Use the command below if you're using Yarn.
yarn add vue-form-container

View Github

Here are all 4 Best Vue Container Layouts for Developers in my opinion. If you find it interesting, please like and share to support

#vue #vuejs

4 Best Vue Container Layouts for Developers
Anthony  Dach

Anthony Dach

1662723960

6 Best Vue Design System Libraries for Developers

What is System Design

System design is the process of defining the architecture, interfaces, and data for a system that satisfies specific requirements. System design meets the needs of your business or organization through coherent and efficient systems. Once your business or organization determines its requirements, you can begin to build them into a physical system design that addresses the needs of your customers. The way you design your system will depend on whether you want to go for custom development, commercial solutions, or a combination of the two.

System design requires a systematic approach to building and engineering systems. A good system design requires you to think about everything in an infrastructure, from the hardware and software, all the way down to the data and how it’s stored.

In this article, We'll share 6 Best Vue Design System Libraries for Developers

  1. @qvant/qui

A Vue.js Neumorphism Design System for Web

Responsive, user-friendly and lightweight library helping us build great products for our customers. This library for Vue 2.x

‼️ Currently we are working on Qui Max for Vue 3.x, it is more complex and modern version of Qui - we recommend use it instead of this package. Qui remains for Vue 2.x, but we can't claim it will be supported well.

What is it?

  • πŸ”© 30+ Vue components
  • πŸ“¦ icons pack
  • πŸ³οΈβ€πŸŒˆ colors & grid
  • πŸ₯· neumorphism styles
  • πŸ“š storybook sandbox

Some examples below:

buttons inputs icons tables datepicker other

Dowload npm and yarn

npm install @qvant/qui -S
yarn add @qvant/qui

View Github

2.   @vtmn/vue

Decathlon Design System UI components for web applications

Decathlon Design System is the framework that helps our ecosystem to design and develop consistent and quality experiences. For its Digital section, it is called Vitamin.

This repository hosts libraries for web applications.

View Github

3.   @globalbrain/sefirot

Vue Components for Global Brain Design System.

Sefirot is a collection of Vue Components for Global Brain Design System. Components are meant to be clean, sophisticated, and scalable.

Sefirot is focused on being used within Global Brain's ecosystem. Hence, the designβ€”UI/UXβ€”of components is relatively fixed, and customization capability is limited. In exchange for customizability, we can create components that are more robust, dynamic, and clean.

Feel free to leverage any component within this project. You may customize components how you see fit, and perhaps some features may be valuable to you. Any suggestions, requests, or questions are welcome.

View Github

4.   @growthbunker/vuedarkmode

πŸ‘©β€πŸŽ¨πŸ‘¨β€πŸŽ¨ A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.

Installation

npm install @growthbunker/vuedarkmode

# Or if you prefer using yarn
yarn add @growthbunker/vuedarkmode

View Github

5.   numl

Atomic UI Framework based on Web Components and Runtime CSS Generation for rapidly building interfaces that follow your Design System 🌈

Intro

  • Add a single JS-script to your page, and you are ready to create virtually any interface using only HTML syntax quickly. No bundler, no config, and no frustration.
  • Integrate Numl with popular JS-Frameworks. Use it with SSG if you like.
  • Use color generation system and styles-to-state bindings to decrease style declarations up to dozens of times compared to plain CSS.
  • Easily create your own Design System and UI Kit based on Numl. Example
  • Customize your elements at any level: Globally, in context, directly. Use design tokens (Custom Properties) for a more convenient way to customize.
  • Remove dozens of UI helper libraries from your project 'cause Numl can do it itself.
  • Add your own elements, style attributes, behaviors, design tokens, custom units, and more...
  • Use it for free. Contribute if you like it.

View Github

6.   birds-design-system

An open source tool for building UI Design Systems with Vue.js

Vue Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development.

The tool is built on top of Vue.js, Vue Styleguidist, Webpack, and Theo and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

Screenshot

Features

  • A set of interconnected patterns & practices for you and your team.
  • A well thought-out terminology, naming conventions, and hierarchy.
  • Get an automated overview of how your design system progresses over time.
  • Global design tokens in YAML format that you can use inside any component.
  • Automatic generation of living, user editable documentation.
  • Easily export and use your Design System as an NPM dependency in another Vue.js or Nuxt.js project.
  • Create a token, an element, or a pattern, and it’s immediately available across all components.
  • Pre-configured Prettier setup for auto-formatting code on both save and before commit.
  • Live Reloading, Autoprefixing, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box.
  • Documentation and the app logic are separated, so you can have public docs while the app itself stays private.
  • And more…

View Github

Here are all 6 Best Vue Design System Libraries for Developers in my opinion. If you find it interesting, please like and share to support

#vue #vuejs #designsystem

6 Best Vue Design System Libraries for Developers