Akryum

<meta name="theme-color" content="#00aaff"/>
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#00aaff"/>
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

Akryum

Syntax: Marko vs Vue

Custom tags and passing data

Marko:

<greeting
  name=fullName
 message-count=30

Akryum

Vue.component('SomeData', {
  apollo: {
    items: ITEMS_QUERY,
  },
  template: `
  <div>
    <slot :items="items"/>
  </div>
  `,
})

Akryum

const sendThisToDevtools = {
  _custom: {
    type: 'set',
    display: 'Set[3]',
    readOnly: true,
    value: [1, 2, {
      _custom: {
        type: 'map',
        display: 'Map[3]',
        value: { a: 42, b: 'foo' }

Akryum

<template>
  <div>
    <button @click="inspect">Inspect me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    inspect () {

Akryum

// --- Base components ---
import Vue from 'vue'

// To extract the component name
const nameReg = /([a-z0-9]+)\./i

function registerGlobalComponents (components) {
  components.keys().forEach(key => {
    const name = key.match(nameReg)[1]
    Vue.component(name, {

Akryum

const { resolve } = require('path')
const chalk = require('chalk')
const findInFiles = require('find-in-files')

const importReg = /'(.*?)'$/

async function findVendorEntries (vendors, folder) {
  const reg = `import (.*? from )?'((${vendors.join('|')})/.*?)'`
  const results = await findInFiles.find(reg, folder, /\.(vue|jsx?|styl)$/)
  const set = new Set(vendors)

Akryum

// @vue/cli-plugin-eslint/ui.js

module.exports = api => {
  // Config file
  api.describeConfig({
    name: 'ESLint configuration',
    description: 'Error checking & Code quality',
    link: 'https://eslint.org',
    files: {
      json: ['eslintrc', 'eslintrc.json'],

Akryum

const LRU = require('lru-cache')

// Micro-caching
exports.cache = function (resolver, keyFactory, { max = 500, maxAge = 3000, perUser = true } = {}) {
  const microCache = new LRU({
    max,
    maxAge,
  })
  return async (holder, args, context) => {
    let key = typeof keyFactory === 'function' ? keyFactory(holder, args, context) : keyFactory

Akryum

Localization

Translate the UI

Follow those simple steps to propose a new language for the CLI UI!

1. Run navigator.languages or navigator.language to get the language code for the new locale. For example: 'fr'.

2. Search NPM to see if a package called vue-cli-locale-<language code> doesn't already exist. If it does, please contribute to it by submitting PRs! If you don't find any, create a new package called vue-cli-locale-<language code>. For example: vue-cli-locale-fr