Taslonic for Vue

Installation

Via NPM:

npm install --save @glorious/taslonic-vue

Via Yarn:

yarn add @glorious/taslonic-vue

Usage

You can easily plug Taslonic into your Vue project. Taslonic integrates smoothly with projects manually configured or generated with Vue CLI.

Setup

To make the experience of showing dialogs easier, some of the Taslonic components need to compile their templates at runtime. To do so, a little tweak in your project configuration is necessary. Below, you can check how to make this fine adjustment on Webpack or the configuration file for an application generated with Vue CLI.

Webpack

Use the resolve configuration attribute to tell Webpack to import a Vue bundle with the template compiler included.

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      // By default, Vue delivers vue.js that does not include
      // the template compiler.
    }
  }
};

Vue CLI

If you have no vue.config.js file in your project yet, create it and use the runtimeCompiler configuration attribute to tell Vue CLI to import a Vue bundle containing the template compiler.

module.exports = {
  runtimeCompiler: true
};

Using Taslonic components

First of all, you need to import Taslonic CSS in the file where you mount your application. In applications created with Vue CLI, that file use to be named as main.js.

import '@glorious/taslonic-vue/dist/taslonic.css'
import Vue from 'vue';
// All the other things your app needs

new Vue({ ... });

Then, import Taslonic components wherever you need them.

<template>
  <t-button @click="openAlert">
    Click Here
  </t-button>
</template>

<script>
  import { tButton, alert } from '@glorious/taslonic-vue';

  export default {
    name: 'my-component',
    components: {
      tButton
    },
    methods: {
      openAlert(){
        alert.open({ content: '<p>I am an <strong>alert</strong></p>' });
      }
    }
  };
</script>

Using Taslonic as a plugin

You can also use Taslonic in your Vue project as a plugin. The following code registers all Taslonic components in advance, so you don’t need to import them anywhere else.

import '@glorious/taslonic-vue/dist/taslonic.css';
import Vue from 'vue';
import taslonic from '@glorious/taslonic-vue/dist/plugin';

Vue.use(taslonic);

new Vue({ ... });

Using Taslonic globally

If your project is not using ES6 modules or you want to give Taslonic a quick try, here is how you can use Taslonic globally.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Taslonic: Standalone Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
    <link href="https://taslonic.compilorama.com/images/favicon-taslonic-32x32.png?v=1" rel="shortcut icon">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glorious/taslonic-vue/dist/taslonic.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@glorious/taslonic-vue/dist/index.js"></script>
    <style media="screen">
      html, body {
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <div data-root>
      <t-button @click="openAlert">
        Click Here
      </t-button>
    </div>
    <script type="text/javascript">
      (function(){
        const { tButton, alert } = taslonicVue;

        new Vue({
          el: '[data-root]',
          components: {
            tButton
          },
          methods: {
            openAlert(){
              alert.open({ content: '<p>Great, it works!</p>' });
            }
          }
        });
      }());
    </script>
  </body>
</html>

Time to build something!

Now that you have plugged Taslonic in your project, you can inspect every component in detail by visiting the live documentation or dig a little deeper about Taslonic UI fundamentals.

Live Documentation

Fundamentals