vue - without node

[Costas]

complete example
https://github.com/pipiscrew/vue3_small_prjs/tree/main/vue2vanilla_retain_PHPSessionCookie

---

Franck Freiburger

Load .vue files directly from your html/js. No node.js environment, no build step.


httpVueLoader.js - (10,4kb) - no longer maintain, author advise to switch to vue3-sfc-loader
vue2-sfc-loader.js - (2,19mb)
vue3-sfc-loader.js - (1,379mb)


http-vue-loader - router is not working
vue3-sfc-loader - Trouble importing router


the same author is the creator of the vue-hackernews where apparently build on node/npm (src)

---

26/10/2021 - Vue standalone, without node

can route as
https://router.vuejs.org/guide/
https://jsfiddle.net/yyx990803/xgrjzsup/

can do interpolation as

<link rel="stylesheet" href="bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


<div id="app">
	<div class="container">

		<div v-if="message.length > 0" v-bind:class="[messagehaserror ? 'alert-danger' : 'alert-success']" class="alert" role="alert">
			{{message}}
		</div>


		
[SIZE=5]Login[/SIZE]

		<div class="col-md-2 offset-md-5">

			<div class="form-group">
				<label>Username</label>
				<input type="email" v-on:keyup.13="login()" v-model="username" v-bind:class="[usernameinvalid ? 'is-invalid' : '']" class="form-control form-control-lg" />
			</div>

			<div class="form-group">
				<label>Password</label>
				<input type="password" v-on:keyup.13="login()" v-model="password" v-bind:class="[passwordinvalid ? 'is-invalid' : '']" class="form-control form-control-lg" />
			</div>
<br>
			<button @click="login" class="btn btn-lg btn-outline-primary">Sign In</button>
		</div>
	</div>            
</div>

<script>

var app = new Vue({
  el: '#app',
       data() {
            return {
				message: '',
                username : '',
                password : '',
                messagehaserror : false,
                passwordinvalid: false,
                usernameinvalid: false            }
        },
    methods : {
        async login() {

                this.usernameinvalid = this.username.length == 0;
                this.passwordinvalid = this.password.length== 0;

                if ( this.username.length == 0 || this.password.length == 0 )
                    return;
                

                let formData = new FormData();
                formData.append('username', this.username);
                formData.append('password', this.password);

                let url = 'api/auth.php';

                const { response, error } = await GetLogin(url, formData);
                
                if (response) {
                   
                    if (!response.success) {
                        this.message = response.message;
                        this.messagehaserror=true;
                    }
                    else 
                    {
                        this.message = response.message;
                        this.messagehaserror=false;

                        router.push({ name: 'user' })
                    }
                } else {
                    this.message = "error : " + (error == null ? "unknown" : error );
                    this.messagehaserror=true;
                }
                
                setTimeout(() => this.message = '', 2000);
        }
    }
});

function GetLogin(url, postData) {

		const requestOptions = {
			method: "POST",
			cache: 'no-cache',
			body: postData
		};

		//https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
		return fetch(url, requestOptions).then(response => {
		  if (response.ok) {
			return response.json().then(response => ({ response }));
		  }
		  else 
			return response.json().then(error => ({  error }));
		})
			.catch(error => { return { error };
		});
}
</script>

ref 2019 - Use Vue to create a SPA without any Node modules

ref 2019 - Dead simple Vue.js router example