Hey, my name is Ian Jennings. And today we're going to get started with PubNub Vue.
So what I've done here is I've created a basic view app using the Vue CLI.
vue create pubnub-vue-demoAnd so all we need to do now is say, npm serve and that we have our basic view.
I'm gonna open up the folder in the browser.
explorer.exe > pubnub-vue-demo
All right. There we go. So we've got everything set here, except we don't have PubNub. So what I'm going to do now is install PubNub. First, kill the server then run.
npm install pubnub-vue --saveWhile that's happening let's import it because we can predict where it will be.
diff --git src/main.js src/main.js
--- src/main.js
+++ src/main.js
@@ -1,4 +1,5 @@
import Vue from 'vue'
+import PubNubVue from 'pubnub-vue';
import App from './App.vue'
Vue.config.productionTip = falseOkay, so that's been imported.
diff --git package.json package.json
--- package.json
+++ package.json
@@ -9,6 +9,7 @@
},
"dependencies": {
"core-js": "^3.6.4",
+"pubnub-vue": "^1.0.1",
"vue": "^2.6.11"
},
"devDependencies": {And we are just going to configure this to use our PubNub publisher and subscribe keys.
diff --git src/main.js src/main.js
--- src/main.js
+++ src/main.js
@@ -2,7 +2,12 @@ import Vue from 'vue'
import PubNubVue from 'pubnub-vue';
import App from './App.vue'
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+
+Vue.use(PubNubVue, {
+subscribeKey: 'demo',
+publishKey: 'demo'
+})
new Vue({
render: h => h(App),Code.exe > main.js - pubnub-vue-demo - Visual Studio Code
PubNub is configured with these two keys. You have a Publish Key and a Subscribe key.
Now we're using demo keys for this editorial, But you should put your own keys in there.
All right. So let's start this and just make sure everything works right now. So we'll do npm run served, and from now on, we won't actually have to restart the server because the packages have already been installed.
ubuntu.exe > ianjennings@DESKTOP-9EPH6Q2: /mnt/c/Users/Jennings/Desktop/pubnub-vue-demo
Get ready to refresh this. And I'm also gonna pop the consul open, too, so you can see what happens.
chrome.exe > pubnub-vue-demo - Google Chrome
Okay, so that would give
So what public does allows you to publish and receive messages over the Internet in real time?
I'm going to start just by publishing a message.
And to do that, within our out, you were going to make a method called
Push.
Code.exe > App.vue - pubnub-vue-demo - Visual Studio Code
So here. This is our default. It looks like I need an extension to render this with some color code. So let's do that.
All right there you have it. Thanks for taking the time to get started. With public view. These are the essentials and you'll be able to create some amazing things from here.
Meanwhile, I'll start typing. So what we need here is a method. So this is the default view. Initialize initialization kind of configuration methodology. You're probably familiar with.
And what we're going to do here is, um
Take this. Hello, world of you, So let's go back and find that
Components. Hello, world And so this is our initial view component. There we go. The highlighted kicked in.
Okay, So what we're going to do now is we're gonna actually delete a lot of this temple. It's stuff. We don't need a lot of this.
Code.exe > HelloWorld.vue - pubnub-vue-demo - Visual Studio Code
Andi have this message we have. It's been initialized with Hello, world.
Great.
Code.exe > ● HelloWorld.vue - pubnub-vue-demo - Visual Studio Code
Message straight. Okay, let's still lead a bunch of this stuff. We just don't need it.
Okay, So what we do need, though, is we're going to need
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -1,33 +1,4 @@
<template>
-<div class="hello">
-<h1>{{ msg }}</h1>
-<p>
-For a guide and recipes on how to configure / customize this project,<br>
-check out the
-<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-</p>
-<h3>Installed CLI Plugins</h3>
-<ul>
-<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-</ul>
-<h3>Essential Links</h3>
-<ul>
-<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-</ul>
-<h3>Ecosystem</h3>
-<ul>
-<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-</ul>
-</div>
</template>
<script> @@ -41,18 +12,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-h3 {
-margin: 40px 0 0;
-}
-ul {
-list-style-type: none;
-padding: 0;
-}
-li {
-display: inline-block;
-margin: 0 10px;
-}
-a {
-color: #42b983;
-}
</style>Code.exe > HelloWorld.vue - pubnub-vue-demo - Visual Studio Code
It doesn't like that. The Templars requires exactly one. Okay. I think we actually do need some of this stuff and we go. We'll just use the helo.
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -1,15 +1,98 @@
<template>
+<div class="hello">
+<h1>{{ msg }}</h1>
+<p>
+For a guide and recipes on how to configure / customize this project,
+<br />check out the
+<a
+href="https://cli.vuejs.org"
+target="_blank"
+rel="noopener"
+>vue-cli documentation</a>.
+</p>
+<h3>Installed CLI Plugins</h3>
+<ul>
+<li>
+<a
+href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+target="_blank"
+rel="noopener"
+>babel</a>
+</li>
+<li>
+<a
+href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+target="_blank"
+rel="noopener"
+>eslint</a>
+</li>
+</ul>
+<h3>Essential Links</h3>
+<ul>
+<li>
+<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+</li>
+<li>
+<a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
+</li>
+<li>
+<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
+</li>
+<li>
+<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
+</li>
+<li>
+<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+</li>
+</ul>
+<h3>Ecosystem</h3>
+<ul>
+<li>
+<a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
+</li>
+<li>
+<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+</li>
+<li>
+<a
+href="https://github.com/vuejs/vue-devtools#vue-devtools"
+target="_blank"
+rel="noopener"
+>vue-devtools</a>
+</li>
+<li>
+<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
+</li>
+<li>
+<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
+</li>
+</ul>
+</div>
</template>
<script>
export default {
-name: 'HelloWorld',
+name: "HelloWorld",
props: {
msg: String
}
-}
+};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
+h3 {
+margin: 40px 0 0;
+}
+ul {
+list-style-type: none;
+padding: 0;
+}
+li {
+display: inline-block;
+margin: 0 10px;
+}
+a {
+color: #42b983;
+}
</style>Get rid of these.
He's here. Okay, There we go. So we have that defense. Hello?
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -1,73 +1,5 @@
<template>
-<div class="hello">
-<h1>{{ msg }}</h1>
-<p>
-For a guide and recipes on how to configure / customize this project,
-<br />check out the
-<a
-href="https://cli.vuejs.org"
-target="_blank"
-rel="noopener"
->vue-cli documentation</a>.
-</p>
-<h3>Installed CLI Plugins</h3>
-<ul>
-<li>
-<a
-href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-target="_blank"
-rel="noopener"
->babel</a>
-</li>
-<li>
-<a
-href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-target="_blank"
-rel="noopener"
->eslint</a>
-</li>
-</ul>
-<h3>Essential Links</h3>
-<ul>
-<li>
-<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-</li>
-<li>
-<a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
-</li>
-<li>
-<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
-</li>
-<li>
-<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
-</li>
-<li>
-<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-</li>
-</ul>
-<h3>Ecosystem</h3>
-<ul>
-<li>
-<a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
-</li>
-<li>
-<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-</li>
-<li>
-<a
-href="https://github.com/vuejs/vue-devtools#vue-devtools"
-target="_blank"
-rel="noopener"
->vue-devtools</a>
-</li>
-<li>
-<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
-</li>
-<li>
-<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
-</li>
-</ul>
-</div>
+<div class="hello"></div>
</template>
<script>And the message is there. Um I'm actually gonna find out where that message comes from. I'm not curious. Welcomed other Hello, World message. So this is our main template and we're gonna be rendering it in. Hello, world. OK, so
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -1,5 +1,7 @@
<template>
-<div class="hello"></div>
+<div class="hello">
+<h1>{{ msg }}</h1>
+</div>
</template>
<script>Let's put this push function into this. Hello, world component. So what we're going to do is call is just to find them view methods here and we're going to make a method called Push.
Code.exe > ● HelloWorld.vue - pubnub-vue-demo - Visual Studio Code
And now we have an object called this
Keon published available and this is essentially the public published function.
The channel, which were defining now is like a room say in a chat application, and it could be typically that's general. Right. So we'll call the general and the message will just be something simple. Like
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -9,6 +9,13 @@ export default {
name: "HelloWorld",
props: {
msg: String
+},
+methods: {
+push() {
+this.$pnPublish({
+channel: "general"
+});
+}
}
};
</script>A new day.
Great. So we have this method called push.
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -13,7 +13,8 @@ export default {
methods: {
push() {
this.$pnPublish({
-channel: "general"
+channel: "general",
+message: new Date().now()
});
}
}And when it executes its going to publish a message over the channel into that room, So let's make a way to trigger this. Let's call this makeup, but him and we'll call it um and do be on click equals Bush.
Code.exe > HelloWorld.vue - pubnub-vue-demo - Visual Studio Code
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -12,10 +12,12 @@ export default {
},
methods: {
push() {
+
this.$pnPublish({
channel: "general",
message: new Date().now()
});
+
}
}
};Code.exe > ● HelloWorld.vue - pubnub-vue-demo - Visual Studio Code
Okay, so that we have this little button. I think I think they're like this. We're going to say publish
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -1,6 +1,7 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
+<button v-on:click="push()" />
</div>
</template>
@@ -12,12 +13,10 @@ export default {
},
methods: {
push() {
-
this.$pnPublish({
channel: "general",
message: new Date().now()
});
-
}
}
};Okay, let's see. So that's been defined here only click this.
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -1,7 +1,7 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
-<button v-on:click="push()" />
+<button v-on:click="push()">Publish</button>
</div>
</template>
Again here Value now is not a function. Okay? That makes sense. This is trying this new date. Um
Code.exe > HelloWorld.vue - pubnub-vue-demo - Visual Studio Code
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -15,7 +15,7 @@ export default {
push() {
this.$pnPublish({
channel: "general",
-message: new Date().now()
+message: Date().now()
});
}
}Yeah.
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -15,7 +15,7 @@ export default {
push() {
this.$pnPublish({
channel: "general",
-message: Date().now()
+message: Date().getTime()
});
}
}Publish.
chrome.exe > pubnub-vue-demo - Google Chrome
Okay, get time's not function. I wonder why
diff --git src/components/HelloWorld.vue src/components/HelloWorld.vue
--- src/components/HelloWorld.vue
+++ src/components/HelloWorld.vue
@@ -15,7 +15,7 @@ export default {
push() {
this.$pnPublish({
channel: "general",
-message: Date().getTime()
+message: new Date().getTime()
});
}
}Okay, There we go. So that's working now.
And we can see here in the network tab.
That those messages are being published over the public network, but we're still missing.