A Vue Forum App Build with Vue Frontend

A Vue Forum App Build with Vue Frontend

A fullstack application built with Vue on the frontend and Node/Express on the backend.

Vue Forum App — Frontend

A fullstack application built with Vue on the frontend and Node/Express on the backend.

Demo    Backend

This repo demonstrates almost everything you need to know to build a complete fullstack application using Vue and Node/Express. This demo covers things like:

  • Authentication/Authorization with JWT
  • Routing
  • Communicating with a backend API
  • Managing the state of the app with Vuex
  • Uploading Images
  • Forms Validation
  • Handling errors
  • Loading states
  • More stuff
Running the demo
  1. Install and run the backend project
  2. Download this repo
  3. Create .env in the root directory, and add:
VUE_APP_API_CLIENT='server'
VUE_APP_API_SERVER_BASE_URL='http://localhost:5000'

I'm here assuming that the backend will run on localhost:5000. If you set VUE_APP_API_CLIENT to mock, you'll use data from the mock store, which means you won't need the backend running.

  1. Run npm install
  2. Run npm run serve

To build it and run it in production mode:

  1. Run npm run build
  2. Run npm run start
Download

10 Best Vue Icon Component For Your Vue.js App

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

1. Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert's fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. vue-transitioning-result-icon

Transitioning Result Icon for Vue.js

A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.

A transitioning (color and SVG) result icon (error or success) for Vue.

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. vue-material-design-icons

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

Demo: https://gitlab.com/robcresswell/vue-material-design-icons

Download: https://gitlab.com/robcresswell/vue-material-design-icons/tree/master

9. vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

Demo: https://mazipan.github.io/vue-ionicons/

Download: https://github.com/mazipan/vue-ionicons/archive/master.zip

10. vue-ico

Dead easy, Google Material Icons for Vue.

This package's aim is to get icons into your Vue.js project as quick as possible, at the cost of all the bells and whistles.

Demo: https://material.io/resources/icons/?style=baseline

Download: https://github.com/paulcollett/vue-ico/archive/master.zip

I hope you like them!

7 Best Vue Highlight Component for Your Vue App

7 Best Vue Highlight Component for Your Vue App

Vue highlight is often used to highlight text and syntax. Here are the 7 Vue highlight components I've collected.

Vue highlight is often used to highlight text and syntax. Here are the 7 Vue highlight components I've collected.

1. vue-snippets

Vue3 Snippets, This extension adds Vue3 Code Snippets into Visual Studio Code.

Download


2. vim-vue-plugin

Vim syntax and indent plugin for vue files

Download


3. vue-highlighter

Vue directive for highlight multiple istances of a word.

Download


4. vue-code-highlight

Beautiful code syntax highlighting as Vue.js component.

Download


5. Vue Prism Editor

A dead simple code editor with syntax highlighting and line numbers. 7kb/gz

Features

  • Code Editing ^^
  • Syntax highlighting
  • Undo / Redo
  • Copy / Paste
  • The spaces/tabs of the previous line is preserved when a new line is added
  • Works on mobile (thanks to contenteditable)
  • Resize to parent width and height
  • Support for line numbers
  • Support for autosizing the editor
  • Autostyling the linenumbers(optional)

Demo

Download


6. vue-highlight-words

A simple port from react-highlight-words

Vue component to highlight words within a larger body of text.

Demo

Download


7. vue-highlight-text

Vue component for highlight multiple istances of a word.

Demo

Download


Thank for read!

Collection of 7 Vue Popup Component for Vue.js App

Collection of  7 Vue Popup Component for Vue.js App

Popup Vue component represents Popup component. Here is a summary of 7 Vue popup components for you to choose.

Popup is a popup window with any HTML content that pops up over App's main content. Popup as all other overlays is part of so called "Temporary Views".
Popup Vue component represents Popup component. Here is a summary of 7 Vue popup components for you to choose.

1. Vue Simple Alert

Simple alert(), confirm(), prompt() for Vue.js, using sweetalert2.

Features

  • Provides simple alert(), confirm(), prompt() like DOM Window methods.
  • Based on sweetalert2.
  • Installed as a Vue.js plugin.
  • Promise based API.
  • Support typescript.

Demo: https://constkhi.github.io/vue-simple-alert/

Download: https://github.com/constkhi/vue-simple-alert/archive/master.zip

2. ciao-vue-popup

A vue popup plugin

Demo: https://ciao-chung.github.io/ciao-vue-popup/#/

Download: https://github.com/ciao-chung/ciao-vue-popup/archive/master.zip

3. Vuexplosive Modal

A simple Vue modal component with an explosion effect.

Demo: https://mburakerman.com/vuexplosive-modal/

Download: https://github.com/mburakerman/vuexplosive-modal/archive/master.zip

4. vue2-simplert-plugin

When we using vue2-simplert, we will need to import the library in every place we need. This is very bored because we do same task in many place. In vue2-simplert we need to access method inside using $refs which is not recommended. For solving those problems I reborn vue2-simplert as Vue.js Plugins and using EventBus for open/close.

Demo: https://mazipan.github.io/vue2-simplert-plugin/

Download: https://github.com/mazipan/vue2-simplert-plugin/archive/master.zip

5. vue-window

Recent web applications are mainly for mobile environments. Therefore window UI is no longer mainstream. However, window UI is still useful for professional web applications for PC environments. This package is an implementation of window UI for PC environment as a Vue Component.

Demo: https://michitaro.github.io/vue-window/

Download: https://github.com/michitaro/vue-window/archive/master.zip

6. VueSwal

A small wrapper for integrating SweetAlert to Vuejs. (Compatible with SSR)

You can customize VueSwal to fit your needs.

Demo: https://sweetalert.js.org/guides/#getting-started

Download: https://github.com/anteriovieira/vue-swal/archive/master.zip

7. VueUp

Simple, lightweight and elegant global notification popup for Vue.js.

Demo: https://chryb.github.io/vueup/

Download: https://github.com/chryb/vueup/archive/master.zip

I hope you like them!