A Vue.js Blueprint for JHipster

A Vue.js Blueprint for JHipster

A Vue.js blueprint for JHipster. It will use Vue.js as the frontend library!

Introduction

This is a JHipster blueprint.

Prerequisites

As this is a JHipster blueprint, we expect you have JHipster and its related tools already installed:

Installation

With NPM

To install this blueprint:

npm install -g generator-jhipster-vuejs

To update this blueprint:

npm update -g generator-jhipster-vuejs

With Yarn

To install this blueprint:

yarn global add generator-jhipster-vuejs

To update this blueprint:

yarn global upgrade generator-jhipster-vuejs

Usage

To use this blueprint, run

jhipster --blueprints vuejs

Using Docker

Download the Dockerfile:

mkdir docker
cd docker
wget https://github.com/jhipster/jhipster-vuejs/raw/master/docker/Dockerfile

Build the Docker images:

docker build -t jhipster-generator-vuejs:latest .

Make a folder where you want to generate the Service:

mkdir service
cd service

Run the generator from image to generate service:

docker run -it --rm -v $PWD:/home/jhipster/app jhipster-generator-vuejs

Run and attach interactive shell to the generator docker container to work from inside the running container:

docker run -it --rm -v $PWD:/home/jhipster/app jhipster-generator-vuejs /bin/bash

Create a new component page

To create a new Vue.js empty page, run

jhipster --blueprints vuejs page

Running local Blueprint version for development

During development of blueprint, please note the below steps. They are very important.

  1. Clone the projects

You'll probably need the current master of generator-jhipster :

  • fork generator-jhipster: https://github.com/jhipster/generator-jhipster/fork
  • clone locally your fork: git clone https://github.com/<your_username>/generator-jhipster
  • cd generator-jhipster
  • git remote add upstream https://github.com/jhipster/generator-jhipster
  • so you'll be able to update regularly your fork, using git fetch upstream && git checkout master && git rebase upstream/master
  • npm ci
  • npm link

Then, about jhipster-vuejs :

  • fork jhipster-vuejs: https://github.com/jhipster/jhipster-vuejs/fork
  • clone locally your fork: git clone https://github.com/<your_username>/jhipster-vuejs
  • cd jhipster-vuejs
  • git remote add upstream https://github.com/jhipster/jhipster-vuejs
  • so you'll be able to update regularly your fork, using git fetch upstream && git checkout master && git rebase upstream/master
  • npm ci
  • npm link
  • npm link generator-jhipster
  1. Create a new folder for the app to be generated and link JHipster and your blueprint there
mkdir my-app
cd my-app
npm link generator-jhipster-vuejs
jhipster -d --blueprints vuejs

Download Details:

Author: jhipster

Demo: https://www.jhipster.tech/

Source Code: https://github.com/jhipster/jhipster-vuejs

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

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.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.