Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue tweet app

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

Example tweet component made with Vue.js

In this app you see a history of tweets. You can write a new tweet directly from vue. A photo can be added from the menu.

As shown in the template:

<template lang="pug">
transition(name="custom-classes-transition"
enter-active-class="animated fadeIn"
leave-active-class="animated bounceOutRight")
.tweetContainer(v-if="ready")
h2 Tweet Example
.innerTweet
textarea(name="tweet" placeholder="Write your tweet here." v-model="tweet")
.photoContainer(v-if="photoHasBeenUploaded")
.photo(v-bind:style="{ backgroundImage: 'url(' + photo + ')' }")
button(@click="removePhoto").removePhoto ✕
.btnContainer
.left
button(@click="triggerFileUpload").addPhoto
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>camera</title>
<path d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"></path>
</svg>
input(ref="photoUpload" @change ="handlePhotoUpload" type="file").hide#thing
.right
p(v-bind:class="{ 'darkRed': underTwenty, 'lightRed': underTen}")
button(:disabled="tweetIsOutOfRange" @click="submitTweet").tweetBtn Tweet
.pastTweets(v-if="pastTweets.length > 0")
h2 Previous Tweets
ul
li(v-for="item in pastTweets")
</template>

Setup

In bash, run these commands:

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the webpack and vue loader.

Github: https://github.com/paytonbox/vue-tweet-app


← Vue file upload vue time tag →

© vuejsexamples.net - Privacy Policy - Cookie Policy