Build Your Website in VueJS Multi Tenant CMS ↴

VueJS is a flexible, modern frontend tech for building apps or websites without requiring a lot of libraries.

While React is backed by Facebook and Angular by Google, VueJs is not maintained by "big tech".

Learn how-to or download and build Vue Multi-Tenant apps with the concepts of components, events, lifecycles, forms, validation, api calls, data & methods using our Vue User Interface (UI) Developer (Dev)Toolkit ...

There are two main ways to setup and build a new Vue project or app:

Build a Vue project in Node
Build a Vue project without Node

How to build Vue apps with Node & NPM - Vue CLI

The Vue Cli simplifies creating Vue apps by handling development type setup, build & tooling work so that you can start creating Vue apps more quickly ... The Vue-cli tool generates Vue projects from templates. You can initialize a node project directory containing all files necessary to develop, debug, test and build a Vue project.
You can install Vue using: npm install vue and you can install Vue Cli using: npm install -g @vue/cli

How to build Vue apps without Node, NPM, or Webpack / Module Loaders - CDN Library

You can setup up a Vue project using static HTML files and without Node, NPM, Webpack or Module loaders by adding link to the latest versions of Vue on the CDN Library: https://unpkg.com/vue and Vue Loader:https://unpkg.com/http-vue-loader for loading Vue files directly from Single File Components (SFC)...

... /src/guides/html/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id=app>
        <div>
            <h1>/index.html - {{ title }}</h1>
            <p><span>{{ message }}</span> <input v-model="message" placeholder="Enter / Type Here..." autofocus />
            </p>
        </div>
        <features></features>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script>
        var vueApp = new Vue({
        el: '#app',
        data: {
            title: 'Vue UI Dev Kit',
            message: ''
        },
        components: {
          'features': httpVueLoader('/src/guides/html/components/features.vue')
        }
    })
</script>
</body>
</html>
    <div id=app>
        <div>
            <h1>{{ title }}</h1>
            <p><span>{{ message }}</span> <input v-model="message" placeholder="Enter / Type Here..." autofocus />
            </p>

        </div>
        <features></features>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script>
        var vueApp = new Vue({
        el: '#app',
        data: {
            title: 'Vue UI Dev Kit',
            message: ''
        },
        components: {
          'features': httpVueLoader('/src/guides/html/components/features.vue')
        }
    })
</script>
</body>
</html>

Using double brackets {{ message}}, you can render a property (message) defined in the data object on the DOM.

... /src/guides/html/components/features.vue

<template>
  <div>
    <ol>
      <li>Vue Component.</li>
    </ol>
  </div>
</template>

<script>
module.exports = {
  mounted() {},
};
</script>
<style scoped>
li {
  background-color: yellow;
}
</style>

How to setup & build a Vue App

In a Vue app / project, you have a public folder which contains index.html, and a src folder with App.vue and main.js / main.ts as the main entry points of your app.

A .vue component file consists of a template, script and style. The data-sources and functions go in the script tag, the style tag is used to define / apply CSS styling and the template tag contains the HTML elements.

<template>
  <div></div>
</template>

<script>
export default {
  name: "feature-one",
  data() {
    return {
      users: [],
    };
  },
  methods: {
    getUsers() {
      return [];
    },
  },
};
</script>
<style scoped>
li {background-color: yellow;}
</style>

How to display data from Api requests - Vue Loops

Use the v-for directive to loop over an array or a list. Vue uses the :key attribute for uniquely & efficiently identifying each item.

Use v-model for two way data-bindings which means that if you change a form's input value, the bound component data will be changed and vice versa.

Usev-bind for one-way data-binding which means that we can change a form's input value by changing the underlying / bound data but we can't change the underlying bound data by changing form's input value.


<template>
<div>
<h6>List Users</h6>
  <ul>
    <li v-for="user in users" :key="user.id">email: {{ user.email }} </li> 
  </ul>
  </div>
</template>

<script type="ts">
/* import Api from "../services/http"; */
export default {
  name: "list-user",
  data() {
    return {
      user: []
    };
  },
  methods: {
    listUsers() {
      /* replace with an api call to get users */
      /* 
      Api.get("/list").then(result => {
        console.log({ result: result });
      });
      */
      return [{id:1, email: 'john@john'}, {id:2, email: 'steve@stev.com'}, {id:3, email: 'peter'}]
    }
  }
};
</script>

  </div>
</template>

<script type="ts">
import Api from "../../services/http";
export default {
  name: "list-user",
  data() {
    return {
      user: []
    };
  },
  methods: {
    listUsers() {
      /* replace with an api call to get users */
      /* 
      Api.get("/list").then(result => {
        console.log({ result: result });
      });
      */
      return [{id:1, email: 'john@john'}, {id:2, email: 'steve@stev.com'}, {id:3, email: 'peter'}]
    }
  }
};
</script>

How to add & post data to an Api - Vue Forms

Use HTML Forms with input fields and a button to submit data back. The v-on:click or @click directive lets you attach a click event handler to an element. The @click handler is a function defined in the methods object

<template>
<div>
<form>
<label>Email:</label>
<label for="title">Email</label>
<input type="text" class="form-control" id="email" v-model="user.email" />
<button @click="subscribe()">Subscribe</button>
</form>
</div>
</template>

<script type="ts">
import Api from "../../services/http";
export default {
  name: 'subscribe-user',
  data() {
    return {
      user: { email: '' }
    };
  },
  methods: {
    subscribe() {
      Api.post('/subscribe', this.user).then(result => {
        console.log({ result: result });
      });
    }
  },
  mounted() {},
  computed: {}
};
</script>

How to Manage State in a Vue App?

Vuex manages global data in a Vue app and acts as a single source of truth so that data changes or mutates predictably

Vuex state management is architected around the concepts of:

State: the shared global data and single source of truth
Store: manages your store so that outside components cannot directly mutate your state
Actions: dispatches a mutation which directly updates your state
Mutations: directly updates your state
Getters: compute properties based on your state

main.ts / main.js

Create a global Vuex store in your Vue main.ts file

import { createApp, h } from "vue";
import { createStore } from 'vuex';
import router from "./router";
import App from "./App.vue";

const store = createStore({
  state: {
      user: null
  },
  getters: {
      getUser(state) {
        return state.user
    },
  },
  mutations: {
    setUser (state, user?:any) {
      state.user = user;
    },
  },
  actions: {
    setUser(context, user: any){
      context.commit('setUser', user);
    }
  },
  modules: {}
});

const app = createApp({
  // root instance definition
  render: () => h(App)
}).use(router);
app.use(store);
app.mount("#app");

src/main.ts

Build Your Next App in VueJS, a flexible, modern platform for building apps or websites without a ton of libraries. React's backed by Facebook, Angular by Google but VueJs is not backed by "big tech" http://launchfeatures.com/a/t1sdqey9 #vuejs #javascript #frontend #ui #ux #coding #nodejs Build Vue apps easily without NPM, Node or Webpack by linking to Vue CDN & Loader and directly injecting Single File Components (SFC) http://launchfeatures.com/a/t1sdqey9 #vuejs #DEVcommunity #100DaysOfCode #CodeNewbies #webpack #SFC #SPA #javascript #coding #learntocode #WebDevelopment