A LIGHT Vue3 Starter Admin Template.

This template should help get you started developing with Vue3, Pinia, TailwindCSS, ElementPlus, Mqtt and TypeScript in Vite. The template uses Vue3 <script setup> SFCs. Also, this template also supports MQTTv5 so that it can easily become a control system for IoT devices.

Check out the Online DEMO.

// login info
Account: tommy
Password: tommy

This starter template includes:

• Vue 3
• Vite
• Pinia
• TailwindCSS
• Vue Router
• ElementPlus UI
• Stylus
• Stylelint
• Eslint
• eslint-config-airbnb-typescript
• mqtt-vue-hook

Collaboration-code specification

Many tech teams generally use Airbnb to constrain code specifications at present.

• Through pre-commit to implement lint check,unit test,code formatting,etc.。
• Combined with the VsCode（formatting automatically when saving：editor.formatOnSave: true）
• Combined with the Git hooks（execute before commit：pre-commit => yarn lint）
• IDE configuration（.editorconfig）,ESLint configuration（.eslintrc.js 和 .eslintignore）,StyleLint configuration（.stylelintrc, .stylelintignore）,for details, please refer to the corresponding configuration file。

Close code specification add .eslintignore and .stylelintignore to src/ directory respectively to ignore

Recommended IDE Setup

• VS Code + Volar

Support MQTT client

*.ts

// protocol = 'wss', 'ws', 'mqtt', ...
// host = ip or domain
// port = 8083, 1883, ...
import { useMQTT } from 'mqtt-vue-hook'
const mqttHook = useMQTT()

mqttHook.connect(`${protocol}://${host}:${port}`, {
    clean: false,
    keepalive: 60,
    clientId: `mqtt_client_${Math.random().toString(16).substring(2, 10)}`,
    connectTimeout: 4000,
})

views/console/ConsolePage1.vue

<script setup lang="ts">
import { useMQTT } from 'mqtt-vue-hook'

const mqttHook = useMQTT()

const form = reactive({
	// ...data
})

const mqttSubscribe = () => {
	mqttHook.subscribe(['+/vue3/starter/console/page1'], 1)

	// if receive mes from '+/vue3/starter/console/page1' before excute callback function.
	mqttHook.registerEvent(
		'+/vue3/starter/console/page1',
		// callback funtion
		(topic: string, message: string) => {
			const mesJson = JSON.parse(message.toString())
			ElNotification({
				title: `MQTT TOPIC: ${topic}`,
				message: mesJson,
				type: 'info',
			})
		},
		'key',
	)
}

const onPublish = () => {
	mqttHook.publish(
		'tommy44458/vue3/starter/console/page1',
		JSON.stringify({
			// ...form.data
		}),
	)
}

onMounted(() => {
	mqttSubscribe()
})

onUnmounted(() => {
	// remove Event by topic and key
	mqttHook.unRegisterEvent('+/vue3/starter/console/page1', 'key')
	mqttHook.unSubscribe('+/vue3/starter/console/page1')
})

Getting Started

Install

yarn install

Dev

yarn dev

Build

yarn build

Syntax check

// eslint
yarn lint
// stylelint
yarn lint:style