Getting Your Head Around Vue.js Scoped Slots

Getting Your Head Around Vue.js Scoped Slots

Scoped slots are a useful feature of Vue.js that can make components more versatile and reusable. The only problem is they’re difficult to understand! Trying to get your head around the interweaving of parent and child scopes is like solving a tough math equation.

A good approach when you can’t understand something easily is to try put it to use in solving a problem. In this article, I’ll demonstrate how I used scoped slots to build a reusable list component.

Shape and color list

Note: You can see the finished product in this Codepen.

The basic component

The component we’re going to build is called my-list and it displays lists of things. The special feature is that you can customize how the list items are rendered in every usage of the component.

Let’s tackle the simplest use case first, and get my-list to render just one list of things: an array of geometric shape names and the number of sides they have.

app.js

Vue.component('my-list', {
  template: '#my-list',
  data() {
    return {
      title: 'Shapes',
      shapes: [ 
        { name: 'Square', sides: 4 }, 
        { name: 'Hexagon', sides: 6 }, 
        { name: 'Triangle', sides: 3 }
      ]
    };
  }
});

new Vue({
  el: '#app'
});

index.html

<div id="app">
  <my-list></my-list>
</div>

<script type="text/x-template" id="my-list">
  <div class="my-list">
    <div class="title">{{ title }}</div>
    <div class="list">
      <div class="list-item" v-for="shape in shapes">
        <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
      </div>
    </div>
  </div>
</script>

read more

Vue.js Single-File JavaScript Components In The Browser

Vue.js Single-File JavaScript Components In The Browser

Browser support for native JavaScript modules is finally happening. The latest versions of Safari and Chrome support them, Firefox and Edge will soon too.

One of the cool things about JavaScript modules for Vue.js users is that they allow you to organize your components into their own files without any kind of build step required.

In this article, I’m going to show you how to write a single-file component as a JavaScript module and use it in a Vue.js app. You can do this all in the browser without any Babel or Webpack!

When I say “single-file component” I’m talking about a single JavaScript file which exports a complete component definition. I’m not talking about the single .vue file you’re used to. Sorry if you’re disappointed. But I still think this is pretty cool, so check it out.

Project setup

Let’s use the vue-cli simple template to do this. That’s right, the one without any Webpack ;)

$ vue init simple sfc-simple

The complete code for this tutorial is in this Github repo if you want to download it.

Change into the directory and create the files we’ll need:

$ cd sfc-simple
$ touch app.js
$ touch SingleFileComponent.js

Remove the inline script from index.html and instead use script tags to link to our modules. Note the type="module" attribute:

read more

Why You Should Avoid Vue.js DOM Templates

Why You Should Avoid Vue.js DOM Templates

It’s a common practice for a Vue app to use the DOM as its template, as it’s the quickest and easiest architecture to set up.

This practice comes with a few catches, however, that make it an undesirable choice for any serious project. For example, the markup you write for a DOM template is not always what you get when your app runs.

In this article, I’ll explain the issues with using the DOM as a template and offer some alternatives.

DOM as a template

The el option is used to mount a Vue instance to an element in the DOM. If no template or render option is present, Vue will use any existing content within the mounting element as the template.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
    <div id="app">
      <!--This markup will be the template of the root instance-->
      <h1>My Vue.js App</h1>
      <p>{{ message }}</p>
    </div>
  </body>
</html>
new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  }
});

This approach gets you up-and-running quickly, but you should transition away from it because:

  • The markup you write in not always what you get
  • Syntax clashes with templating engines
  • Incompatibility with server-side rendering
  • Runtime template compilation is required

read more

5 Vuex Plugins For Your Next VueJS Project

5 Vuex Plugins For Your Next VueJS Project

There are a lot of good reasons to use Vuex to manage the state of your Vue.js app. For one, it’s really easy to add super-cool features with a Vuex plugin. Developers in the Vuex community have created a tonne of free plugins for you to use, with many of the features you can imagine, and some you may not have imagined.

In this article, I will show you five feature that you can easily add to your next project with a Vuex plugin.

  1. Persisting state
  2. Syncing tabs/windows
  3. Language localization
  4. Managing multiple loading states
  5. Caching actions

1. Persisting state

vuex-persistedstate uses the browser’s local storage to persist your state across sessions. This means that refreshing the page or closing a tab won’t wipe your data.

A good use case for this would be a shopping cart: if the user accidentally closes a tab, they can reopen it with the page state intact.

2. Syncing tabs/windows

vuex-shared-mutations synchronizes state between different browser tabs. It does this by storing a mutation to local storage. The storage event triggers an update in all other tabs/windows, which replays the mutation, thus keeping state in sync.

read more

Build a PDF Viewer with Vue.js and Cloudinary

Build a PDF Viewer with Vue.js and Cloudinary

Cloudinary offers an interesting feature: the ability to generate images from PDF files and pages. With Cloudinary, you can create thumbnail images of your documents for previewing purposes. It’s useful when you don’t want to grant user access to the content, but need to give them a sneak peek of what they’re missing if they haven’t downloaded the PDF yet.

In this blog, we will share a hands-on example for building such solutions using Cloudinary. Here are the tools you’ll need:

  • Cloudinary: end-to-end image and video management service
  • Vue: progressive JavaScript framework

Create a Vue Project

The best and easiest way to get started on a Vue project is via the command line tool. You can install it with npm using the following command:

npm install -g vue-cli

This installation exposes Vue commands to the CLI, which you could use to perform various tasks including creating a new Vue project. Here is the command that creates a new project:

vue init simple pdf-viewer

simple is the project template we prefer to use as our very simple example, while pdf-viewer is the name of the project we are creating.

This command creates a file, index.html with some simple markup. Feel free to empty this file and replace with the following:

<html>
<head>
  <title>Welcome to Vue</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="/style.css">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    <div class="container">
      <h3 class="text-center" style="color:#fff">PDF Viewer</h3>
      <div class="row">
        <div class="col-md-6 col-md-offset-3" v-if="file">
          <img :src="preview" alt="" class="preview">
        </div>
      </div>
      <div class="row pages">
        <div class="col-md-4" v-for="page in pages">
          <img :src="page.url" alt="" class="img-responsive" @click="selectImage(page.page)">
        </div>
      </div>
      <div class="row upload" v-if="!file">
        <div class="col-md-offset-4 col-md-4">
          <button @click="openWidget()">Upload PDF</button>
        </div>
      </div>
    </div>
  </div>
  <script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>
  <script src="/script.js"></script>
</body>
</html>

read more