How to Build & Launch Better Apps or Websites

Questions
Answers
Coaching
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:

  1. Build a Vue project in Node

  2. 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:

  1. State: the shared global data and single source of truth
  2. Store: manages your store so that outside components cannot directly mutate your state
  3. Actions: dispatches a mutation which directly updates your state
  4. Mutations: directly updates your state
  5. 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");
     




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

 ↴ 

Subscribe to VueJS UI Toolkit Newsletter

Download "The VueJS UI Toolkit" or Get the latest posts delivered to your inbox ...

We respect your email privacy

Vue State is all the data Vue needs to keep track of or manage for an app to work, as users interact with it