Add BootstrapVue to VuePress

https://dev.to/conorsheehan1/add-bootstrapvue-to-vuepress-3h7g
Create a VuePress project

The first thing we need to do is create a new VuePress project. It's really easy with the latest version of npm or yarn. From the VuePress docs



yarn create vuepress-site $optionalDirectoryName





Install BootstrapVue

Next we install BootstrapVue



yarn add bootstrap bootstrap-vue





Configuration

Now we need to import BootstrapVue in .vuepress/enhanceApp.js, where we have access to the vue instance.



// .vuepress/enhanceApp.js
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
export default ({ Vue, options, router, siteData }) => {
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue);
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin);
}


Finally we need to load the bootstrap css. VuePress ships with stylus by default now, but we can still import css into our stylus file at .vuepress/styles/index.styl



/**
* Custom Styles here.
*
* ref：https://v1.vuepress.vuejs.org/config/#index-styl
*/
@require '~bootstrap/dist/css/bootstrap.css'
@require '~bootstrap-vue/dist/bootstrap-vue.css'


That's it! Now you can use BootstrapVue components in your VuePress app.



Example

Vuepress lets you embed components directly in markdown, so you can do something like this



<!-- src/index.md -->
## Hi from bootstrap-vue
<b-button>Hello world!</b-button>


Here's an example app I've deployed to netlify which uses various BootstrapVue components including b-carousel and b-table: https://conorscocktails.netlify.app/
You can find the sourcecode here: https://github.com/ConorSheehan1/conors-cocktails

Top 5 free resources for getting started on Vue JS

https://medium.com/js-dojo/top-5-free-resources-for-getting-started-on-vue-js-8c05bdbb47b5?source=rss------vuejs-5
So you want to get started learning Vue? That is awesome, great choice in frameworks!Continue reading on Vue.js Developers »

Vue.js Interview Challenge — #14 — Summoning Pikachu

https://medium.com/@m.rybczonek/vue-js-interview-challenge-14-summoning-pikachu-bccfe44eba0a?source=rss------vuejs-5
Problem statementContinue reading on Medium »

Implementing Audio in a Podcast App with Strapi

https://dev.to/ravgeetdhillon/implementing-audio-in-a-podcast-app-with-strapi-26fa
Podcasts have exploded in popularity, and platforms including Google Podcasts and Spotify offer content creators a way to communicate their thoughts with listeners around the world. If you’d like to join them, you can create your own podcast app using Strapi and a frontend of your choice.
In this tutorial, you’ll learn to implement audio in a podcast app. You’ll build your app in Nuxt.js and manage your podcast content in the Strapi CMS.
Read the full blog on Strapi.
Thanks for reading 💜
I publish a monthly newsletter in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing on the web.
Connect with me through Twitter • LinkedIn • Github or send me an Email.
— Ravgeet, Full Stack Developer and Technical Content Writer

Vue.js Interview Challenge — #14 — Summoning Pikachu — Solution

https://medium.com/js-dojo/vue-js-interview-challenge-14-summoning-pikachu-solution-9ca3c67e497d?source=rss------vuejs-5
SolutionContinue reading on Vue.js Developers »

Introducing Vue Autocomplete Element

https://medium.com/@shashikantwagh721/introducing-vue-autocomplete-element-34f0dd5bed7?source=rss------vuejs-5
I had recently published vue-autocomplete-ele an npm package which is a Vue Autocomplete/ Typeahead component which you can import to your…Continue reading on Medium »

Underdog UI Frameworks: 5 JavaScript Frameworks you Need to Try in 2022

https://blog.bitsrc.io/underdog-ui-frameworks-5-javascript-frameworks-you-need-to-try-in-2022-93e11fef186d?source=rss------vuejs-5
Other frameworks deserve some love too!Continue reading on Bits and Pieces »

VUE cli with electron

https://dev.to/grahammorby/vue-cli-with-electron-3ke9
I remember the days when JavaScript simply ran hover effects on buttons and made my page a little more interactive. Ahh the good old days before the many frameworks and crazy things we are now doing with good old JS!
But a project came up recently that required a desktop application which I have never made. How do we do it I thought, I mean I’m a web developer, not an app developer! So after picking my flavor of JavaScript frameworks a few years ago I wondered if there was a way I could use VUE.js as my sword of choice and build this app and thanks to Electron that is all very possible.
Shall we have a go? Now before we jump in I’m going to assume you have used VUE before and are familiar with NPM/Yarn and the terminal. So with that all done let’s get started.
First and foremost we need to get VUE Cli installed which we can do by running the following.



npm install -g @vue/cli


Then we need to create our app. When you move forward it will ask you which flavor of VUE you want to use and for this tutorial, we are going to use VUE 2. So go ahead and run the following in your terminal to create an app. Options like Eslint, babel, and separate js files are your personal choice so I’ll leave the full flavor up to you.



vue create electron-app



Next we need to install Electron, to do this simply install the VUE electron package as so.



cd electron-app
vue add electron-builder


With that done we now need build our little app out by running the following code. You will get asked for a version and for this set up we are using version 13.0.0

Lets now run to serve our app so we can see it in all its wonderful glory!



npm run electron:serve



We now have our desktop app all up and running and ready to code something cool. Now imagine we have a fully fledged JavaScript app with all its wonderful abilities running in a desktop environment. Pretty cool right?
Now if you want to build out the app to install, run the following code



npm run electron:build


Now if we head over to our file explorer you will see we have a dist folder and contained here is our build with an installer, a bundled and non bundled version all ready to test out!

There is so much more we can do with config files and such but for now have a play and see what you think, maybe try building out a few different apps, use vuex and connect to an api! It’s a satisfying way to develop.

generate android app from website url with api

https://dev.to/amreldessouki/generate-android-app-from-website-url-with-api-6ha
*try endpoint *

rapidapi
build your engine now to convert any website to android app ready to publish on google play
the endpoint return key & app bundle & apk

Understanding IIFEs

https://javascript.plainenglish.io/understanding-iifes-64d1b8f234ce?source=rss------vuejs-5
Immediately Invoked Function Expression, you are using them without knowingContinue reading on JavaScript in Plain English »

Vue's Computed Properties - The Most Important Feature?

https://dev.to/ttntm/vues-computed-properties-the-most-important-feature-1fhp
Coincidences happen sometimes and last night was one such occasion. I was casually checking my inbox and read Michael Thiessen’s newsletter, one of my favorites when it comes to Vue. This particular issue dealt with Vue’s “most important feature”, computed properties - a statement that I tend to agree with and also one that made me write better code when working on version 2 of aitrack.work, my FOSS time tracking companion app.
I was implementing drag and drop sorting for the tasks the app uses to track time and I chose vue.draggable.next for that based on a positive experience I had using it for another project. Getting it to work as intended wasn’t too much trouble, but the resulting code felt a little off somehow. Best to have a look yourself though:



<script setup>
import { ref, watch } from 'vue'
const localList = ref([])
// ...
watch(tasklist, () => localList.value = tasklist.value)
const events = {
onDragChange() {
const ordered = (arr) => arr.map((el, index) => {
el.order = index
return el
})
setState('tasklist', ordered(localList.value), false)
},
// ...
}
localList.value = tasklist.value
</script>


As you can see, there’s 3 different parts of code that all take care of setting/updating the localList ref() that’s used by the drag and drop component. It’s based on an array called tasklist that’s obtained (read-only) from the app’s centralized (composition API) store. That works, but it’s prone to errors when making further changes due to the code being spread all over the place. I’m talking about the ‘TaskList’ component here and that’s basically the centerpiece of the whole application. As such, changes are very likely to occur in the future and the code should be kept as clean and maintainable as possible - one more reason the code shown above felt a little off to me.
Anyway, I left it like that for the day until I read the newsletter mentioned earlier. That got me thinking about the code again and I remembered Vue’s ‘Computed Setters’ - something that wasn’t even mentioned in the newsletter, but also something I’d occasionally used in the past. With that in mind, the new drag and drop feature was quickly up for refactoring, even before it ever made it to production…
Eventually, this is what I ended up with:



<script setup>
import { computed } from 'vue'
const localList = computed({
get: () => [...tasklist.value],
set: (val) => {
const ordered = (arr) => arr.map((el, index) => {
el.order = index
return el
})
setState('tasklist', ordered(val), false)
}
})
// ...
</script>


Now there’s a single computed() call that defines everything that should happen to localList which itself is referenced once in the drag and drop component’s v-model directive. Messing up the code is definitely less likely this way and we’re also making better use of Vue’s internals, i.e. ‘Computed Caching’ instead of manually taking care of setting and updating the component’s state with watch() when that’s not really neccessary. On top of that, it’s less code that’s also much easier to understand compared to the initial version without using computed().
I’ll end this with the quote from Michael’s newsletter that I shamelessly paraphrased into this little article’s title:

Computed properties are the most important feature of Vue.

By: Michael Thiessen
And please don’t get me wrong: I’m not trying to promote someone else and/or their newsletter here, but I think it’s a really helpful resource for people working with Vue, even just to get you to remember about things you might not have considered initially (i.e. computed setters in my case).

i18n style

https://dev.to/razbakov/i18n-style-48me
Style Guide


key pattern: <page>.<block>.<element>.<attribute>


camelCase for multiple words




Background

What are possible ways to map strings in JSON?
You would probably start with plain object:



{
"Login": "Login",
"Logout": "Logout",
"New post": "New post",
}


And you will create same file for each language, just changing values with translations.
But what if you decide later to change New post to Add post? You will need to change the key in all language files and in all source code files.
Alternative way is to use more abstract keys, that gives you more flexibility. For example:



{
"login": "Login",
"logout": "Logout",
"new": "New post",
}


And what if you now have another feature: Add event? You alternatives are:

1) make complex keys

2) group by meaning
Complex-word keys would be:



{
"login": "Login",
"logout": "Logout",
"newPost": "New post",
"newEvent": "New event",
}


And what if now you have a login screen, which has a title, subtitle, 2 fields and submit button?

You might do this:



{
"loginTitle": "Login",
"loginSubtitle": "Please login to continue",
"loginSubmit": "Continue",
"logout": "Logout",
"newPost": "New post",
"newEvent": "New event",
}


And what if you have a registration screen which have similar elements?



{
"loginTitle": "Login",
"loginSubtitle": "Please login to continue",
"loginSubmit": "Continue",
"registerTitle": "Registration",
"registerSubtitle": "Create new account",
"registerSubmit": "Start",
"logout": "Logout",
"newPost": "New post",
"newEvent": "New event",
}


As you see translation file grows exponentially. You can make life easier for developers and translators by grouping keys:



{
"login": {
"title": "Login",
"subtitle": "Please login to continue",
"submit": "Continue",
},
"register": {
"title": "Registration",
"subtitle": "Create new account",
"submit": "Start",
},
"logout": "Logout",
"post": {
"new": "New post"
},
"event": {
"new": "New event"
}
}


When grouping elements look for similarities, what those elements have in common and how it would scale.
Input element can have label, placeholder, error. Those are attributes of that element, so it make sense to group values by element name, i.e. in our login screen:



{
"login": {
"title": "Login",
"subtitle": "Please login to continue",
"submit": "Continue",
"username": {
"label": "Enter your username",
"placeholder": "JohnDoe",
"error": "Username is a required field",
}
},
}


But what if there are more error messages later? If we need to add error message for complexity validation (i.e. "Please use numbers, letters, special symbols"). Both are errors, so we would group them under errors.



How does this look in YML?

YML looks similar to JSON, just without curly brackets:



login:
title: Login
subtitle: Please login to continue
submit: Continue
username:
label: Enter your username
placeholder: JohnDoe
error: Username is a required field


or you can also do it per line:



login.title: Login
login.subtitle: Please login to continue
login.submit: Continue
login.username.label: Enter your username
login.username.placeholder: JohnDoe
login.username.error: Username is a required field


Last one have few benefits:

It's easier to review PRs having the whole context, and not just seeing some part of bigger object
It's easier to find string from t() function in the translations

But also you could mix up login and login.title and destroy the object without even noticing it.



More on this topic:


https://dev.to/omaiboroda/three-ways-to-name-i18n-translation-keys-2fed
https://medium.com/frontmen/web-internationalisation-i18n-lessons-ive-learned-the-hard-way-438a3e157e0
https://lokalise.com/blog/translation-keys-naming-and-organizing/
https://phrase.com/blog/posts/ruby-lessons-learned-naming-and-managing-rails-i18n-keys/

How to Use the Hover Component in Vuetify

https://javascript.plainenglish.io/how-to-use-the-hover-component-in-vuetify-7059cf8724d2?source=rss------vuejs-5
Learn how to use the hover component in Vuetify.Continue reading on JavaScript in Plain English »

Gitpod for OpenBMC study

https://medium.com/@chiyanglin/gitpod-for-openbmc-study-a3db317737a1?source=rss------vuejs-5
HTML and Node JS studyContinue reading on Medium »

What is the utility of a v-model directive?

https://dev.to/leonnimoy/what-is-the-utility-of-a-v-model-directive-coh
Definition

Looking through the documentation v-model is a directive that can be use to:
"Create a two-way binding on a form input element or a component".
Which in other words, allows you to kinda create a data relation between the data object of your component and some other component or an HTML element, like a form input.



Nice! But why is that useful?

Because allows you to make quick value updates in your component. Without the need to use states, props, or anything like that. And is a "two-way binding", allowing a great manipulation of data in your component.




Example

Let's see a quick example:

HTML:



<div id="app">
<input v-model="checkedNames" type="checkbox" id="kirk" value="John"/>
<label for="kirk"> Kirk</label>
<input v-model="checkedNames" type="checkbox" id="spock" value="Paul"/>
<label for="spock"> Spock</label>
<input v-model="checkedNames" type="checkbox" id="mcCoy" value="George"/>
<label for="mcCoy"> McCoy</label>
<input v-model="checkedNames" type="checkbox" id="uhura" value="Ringo"/>
<label for="uhura"> Uhura</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>


CSS:



body {
font-family: 'Bitter', serif;
}
#app {
text-align: center;
padding: 70px;
max-width: 360px;
font-size: 16px;
margin: 0 auto;
display: table;
line-height: 2em;
}
label {
padding-right: 10px;
}


JavaScript:



const App = {
data() {
return {
checkedNames: []
}
}
}
Vue.createApp(App).mount('#app')


See how in each input tag, the v-model directive manipulates the DOM and appends the value in each label, into the array. From the input to the data component object (one-way biding). And after that, send the array updated with the values to the span tag(two-way biding)?
Awesome, right?




Restrictions

As explained in the documentation, the v-model directive has its use limited to the following elements:



<input>
<select>
<textarea>
components





Acknowledgment

I'll like to thank @sarah_edo, for the great example provided in her CodePen.

Binary to Base64 Conversion

https://rohitshresthaa.medium.com/binary-to-base64-conversion-8840d677954a?source=rss------vuejs-5
Why convert into Base64 format?Continue reading on Medium »

Best Front-End Frameworks in 2022

https://artbees.medium.com/best-front-end-frameworks-in-2022-c9a6ed946b25?source=rss------vuejs-5
Front-end frameworks are instrumental in creating applications with a rich user experience.Continue reading on Medium »

MVVM nedir ? Two-way data binding nasıl işler ?

https://enisgltkn.medium.com/mvvm-nedir-two-way-data-binding-nas%C4%B1l-i%C5%9Fler-ace469f83ea9?source=rss------vuejs-5
Bir MVVM şablonunda Model, View ve ViewModal bulunur. Şablon da adını bu üçünden alır. Günümüzdeki Angular, Vue, Flutter gibi yazılım…Continue reading on Medium »

Simple Vue.js Pagination Example with Laravel

https://medium.com/techvblogs/simple-vue-js-pagination-example-with-laravel-6c1a561030c?source=rss------vuejs-5
Mar 13, 2021, Originally published at techvblogs.com ・3 min readContinue reading on TechvBlogs »

Frontend Olympics Coding Challenges

https://dev.to/devolympics/frontend-olympics-coding-challenges-16pl
Code yourself to the top on this new coding challenge!


Fight your way through several front-end challenges and get rewarded by the DevOlympics community!