Repository: nuxt/create-nuxt-app
Pull request #291 (2019-07-19 16:09:40)

Add UI Framework: Framevuerk
**Framevuerk** is a Fast, Responsive, Without Dependencies, Both Direction Support and **Configurable** (before run-time) UI Framework based on Vue.js. I've created a simple template using Framevuerk and add an option to select it in the `saofile.js`.

I didn't commit `npm run test` changes to `index.test.js.*` files. Maybe you should doing that?

Framevuerk docs and demo:
https://framevuerk.com

Framevuerk source on github:
https://github.com/framevuerk/framevuerk

clarkdo: Could you please resolve the conflict ?
nainemom: done.
should I commit `npm run test` changes to `index.test.js.*` files?
clarkdo: No worries, I'll fix for you, thanks for the contribution!

Patch:
diff --git a/README.md b/README.md
index 8e06f75..4e014db 100644
--- a/README.md
+++ b/README.md
@@ -49,6 +49,7 @@ yarn create nuxt-app <my-project>
     - [Axios](https://github.com/nuxt-community/axios-module)
 3. Choose your favorite UI framework:
     - None (feel free to add one later)
+    - [Framevuerk](https://framevuerk.com)
     - [Bootstrap](https://github.com/bootstrap-vue/bootstrap-vue)
     - [Vuetify](https://github.com/vuetifyjs/vuetify)
     - [Bulma](https://github.com/jgthms/bulma)
diff --git a/saofile.js b/saofile.js
index 471fd4b..3657670 100644
--- a/saofile.js
+++ b/saofile.js
@@ -47,6 +47,7 @@ module.exports = {
         { name: 'Buefy', value: 'buefy' },
         { name: 'Bulma', value: 'bulma' },
         { name: 'Element', value: 'element-ui' },
+        { name: 'Framevuerk', value: 'framevuerk' },
         { name: 'iView', value: 'iview' },
         { name: 'Tachyons', value: 'tachyons' },
         { name: 'Tailwind CSS', value: 'tailwind' },
diff --git a/template/_package.json b/template/_package.json
index 182ba87..c432430 100644
--- a/template/_package.json
+++ b/template/_package.json
@@ -5,6 +5,10 @@
   "author": "<%= author %>",
   "private": true,
   "scripts": {
+    <%_ if (ui === 'framevuerk') { _%>
+    "build:framevuerk": "framevuerk-builder -c ./framevuerk-config.js",
+    "prepublish": "npm run build:framevuerk",
+    <%_ } _%>
     <%_ if (eslint) { _%>
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
     <%_ } _%>
@@ -83,6 +87,8 @@
     "nuxt-buefy": "^0.3.2",
     <%_ } else if (ui === 'iview') { _%>
     "iview": "^3.1.5",
+    <%_ } else if (ui === 'framevuerk') { _%>
+    "framevuerk": "^2.2.5",
     <%_ } _%>
     <%_ if (axios) { _%>
     "@nuxtjs/axios": "^5.3.6",
@@ -104,6 +110,8 @@
     "@nuxtjs/tailwindcss": "^1.0.0",
     <%_ } else if (ui === 'vuetify') { _%>
     "@nuxtjs/vuetify": "^1.0.0",
+    <%_ } else if (ui === 'framevuerk') { _%>
+    "framevuerk-builder": "^2.0.2",
     <%_ } _%>
     <%_ if (eslint) { _%>
     "@nuxtjs/eslint-config": "^1.0.1",
diff --git a/template/frameworks/framevuerk/components/FramevuerkLogo.vue b/template/frameworks/framevuerk/components/FramevuerkLogo.vue
new file mode 100644
index 0000000..98ddfbd
--- /dev/null
+++ b/template/frameworks/framevuerk/components/FramevuerkLogo.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="logo" :class="{ready: isReady }">
+    <svg
+      id="Layer_2"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      width="534px"
+      height="420px"
+      viewBox="0 0 534 420"
+      enable-background="new 0 0 534 420"
+      xml:space="preserve"
+    >
+      <path
+        fill="#35495E"
+        d="M320.296,71.189c0,0-16.014-0.447-22.081,3.909c0,0,6.068-14.188,20.215-25.191
+        c2.799-2.177-19.282-19.904-49.138-19.904c-31.1,0-51.937,17.727-49.138,19.904c14.147,11.003,20.215,25.191,20.215,25.191
+        c-6.067-4.356-22.081-3.909-22.081-3.909c1.801,9.907-13.913,46.987-13.913,46.987l64.917,101.488l64.917-101.488
+        C334.209,118.176,318.494,81.096,320.296,71.189z M269.292,128.67c-3.732-16.092-14.928-36.155-14.928-41.288
+        c0-5.133,9.796-21.458,14.928-21.458c3.732,0,14.928,16.326,14.928,21.458C284.22,92.514,273.024,112.578,269.292,128.67z"
+      />
+      <polygon fill="#41B883" points="416.507,44 269.292,266.825 122.077,44 10.029,14 269.292,400.888 528.555,14 " />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      isReady: false
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      this.isReady = true
+    }, 1000)
+  }
+}
+</script>
+
+<style scoped>
+.logo {
+  height: auto;
+  display: inline-block;
+  vertical-align: middle;
+  width: 43px;
+}
+.logo svg {
+    width: 100%;
+    height: auto;
+    max-height: 12em;
+    margin: 0 auto;
+}
+.logo svg polygon {
+  transform: translateY(-100%);
+  transition-duration: 2s;
+}
+.logo svg path {
+  fill: transparent;
+  transition-delay: 0.6s;
+  transition-duration: 1s;
+}
+.logo.ready svg polygon {
+  transform: translateY(0);
+  fill: #fff;
+}
+.logo.ready svg  path {
+  stroke: transparent;
+  stroke-width: 0;
+  fill: #fff;
+}
+</style>
diff --git a/template/frameworks/framevuerk/framevuerk-config.js b/template/frameworks/framevuerk/framevuerk-config.js
new file mode 100644
index 0000000..4e2328e
--- /dev/null
+++ b/template/frameworks/framevuerk/framevuerk-config.js
@@ -0,0 +1,17 @@
+module.exports = {
+  'config-name': 'nuxt',
+  'direction': 'ltr', // or rtl
+  'primary-color': '#41b883',
+  'secondary-color': '#35495e',
+  'danger-color': '#BF2B2B',
+  'warning-color': '#BB8A2A',
+  'info-color': '#22A4C1',
+  'bg-color': '#333',
+  'header-bg-color': '#292929',
+  'sidebar-bg-color': '#313131',
+  'footer-bg-color': '#16212D',
+  'padding': '0.8em',
+  'transition-speed': '0.3s',
+  'border-radius': '0',
+  'shadow-size': '0'
+}
diff --git a/template/frameworks/framevuerk/layouts/default.vue b/template/frameworks/framevuerk/layouts/default.vue
new file mode 100644
index 0000000..92011f2
--- /dev/null
+++ b/template/frameworks/framevuerk/layouts/default.vue
@@ -0,0 +1,34 @@
+<template>
+  <nuxt />
+</template>
+
+<style>
+html {
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 15px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  margin: 0;
+}
+html,
+body,
+#__nuxt,
+#__layout {
+  min-height: 100%;
+  height: 100%;
+  position: initial;
+}
+body .material-icons {
+  vertical-align: middle;
+}
+</style>
diff --git a/template/frameworks/framevuerk/pages/index.vue b/template/frameworks/framevuerk/pages/index.vue
new file mode 100644
index 0000000..b586762
--- /dev/null
+++ b/template/frameworks/framevuerk/pages/index.vue
@@ -0,0 +1,183 @@
+<template>
+  <fvMain>
+    <fvSidebar v-model="sidebar" class="sidebar">
+      <div class="fv-text-center fv-padding">
+        <fvAvatar name="Default User" src="https://randomuser.me/api/portraits/women/44.jpg" size="128px" />
+        <h2 class="fv-padding-sm">
+          Default User
+        </h2>
+      </div>
+      <fvList parent>
+        <fvListItem class="selected">
+          <i class="material-icons">sentiment_very_satisfied</i> Welcome
+        </fvListItem>
+        <fvListItem disabled>
+          <i class="material-icons">person</i> Profile
+        </fvListItem>
+        <fvListItem disabled>
+          <i class="material-icons">mail</i> Messages
+        </fvListItem>
+        <fvListItem disabled>
+          <i class="material-icons">event_available</i> Events
+        </fvListItem>
+        <fvListItem disabled>
+          <i class="material-icons">photo</i> Pictures
+        </fvListItem>
+      </fvList>
+    </fvSidebar>
+    <fvContent>
+      <fvHeader>
+        <fvButton class="fv-margin-end fv-hidden-lg fv-hidden-xl" @click="toggleSidebar">
+          <i class="material-icons">menu</i>
+        </fvButton>
+        <div class="fv-margin-end">
+          <FramevuerkLogo />
+        </div>
+        <div class="fv-grow">
+          <h2 class="fv-hidden-xs">
+            Framevuerk
+          </h2>
+          <small class="fv-hidden-sm fv-hidden-xs"> Generated Nuxt + Framevuerk Template </small>
+        </div>
+        <fvButton class="fv-margin-end" @click.prevent="toggleDocsMenu">
+          <i class="material-icons">list</i>
+          <span class="fv-hidden-xs fv-hidden-sm"> Documents </span>
+          <fvMenu v-model="docsMenu">
+            <div>
+              <div class="fv-border-bottom fv-padding">
+                <label class="fv-text-light"> <i class="material-icons">list</i> Documents </label>
+              </div>
+              <div class="fv-padding">
+                <a class="fv-link fv-block fv-margin-bottom" target="_blank" href="https://www.framevuerk.com/"><i class="material-icons">link</i> Framevuerk Docs</a>
+                <a class="fv-link fv-block fv-margin-bottom" target="_blank" href="https://github.com/framevuerk/framevuerk"><i class="material-icons">link</i> Framevuerk on Github</a>
+                <a class="fv-link fv-block fv-margin-bottom" target="_blank" href="https://nuxtjs.org/"><i class="material-icons">link</i> Nuxt Docs</a>
+                <a class="fv-link fv-block" target="_blank" href="https://github.com/nuxt/nuxt.js"><i class="material-icons">link</i> Nuxt on GitHub</a>
+              </div>
+            </div>
+          </fvMenu>
+        </fvButton>
+        <fvButton class="fv-margin-end">
+          <i class="material-icons">clear</i>
+          <span class="fv-hidden-xs fv-hidden-sm"> Cancel </span>
+        </fvButton>
+        <fvButton>
+          <i class="material-icons">done</i>
+          <span class="fv-hidden-xs fv-hidden-sm"> Submit </span>
+        </fvButton>
+      </fvHeader>
+      <div class="content fv-padding">
+        <div class="fv-margin-bottom fv-hidden-xs fv-hidden-sm" />
+        <div class="content__header fv-margin-bottom fv-padding">
+          <div class="fv-padding fv-margin-bottom fv-text-center">
+            <Logo />
+          </div>
+          <p>
+            <b>Framevuerk</b> is a Fast, Responsive, Without Dependencies, Both Direction Support and Configurable UI Framework based on <b>Vue.js</b>.
+            In this template we just add it to <b>Nuxt.js</b> and put some of most usable component inside a form to show you how it's look like.
+          </p>
+        </div>
+        <div class="content__body fv-border fv-radius fv-shadow">
+          <label class="fv-control-label fv-padding"> <i class="material-icons">person_add</i> Create New User </label>
+          <div class="fv-padding container">
+            <fvForm class="fv-row">
+              <fvFormElement class="fv-col-md-6" label="First Name">
+                <fvInput v-model="exmps.firstName" placeholder="Enter First Name" />
+              </fvFormElement>
+              <fvFormElement class="fv-col-md-6" label="Last Name">
+                <fvInput v-model="exmps.lastName" placeholder="Enter Last Name" />
+              </fvFormElement>
+              <fvFormElement class="fv-col-12" label="Gender" inline>
+                <fvCheck v-model="exmps.gender" content="m">
+                  Men
+                </fvCheck>
+                <fvCheck v-model="exmps.gender" content="f">
+                  Women
+                </fvCheck>
+                <fvCheck v-model="exmps.gender" :content="null">
+                  Other
+                </fvCheck>
+              </fvFormElement>
+              <fvFormElement class="fv-col-12" label="Home to Work Distance">
+                <template slot="label" slot-scope="scope">
+                  {{ scope.label }}
+                  <span class="fv-margin-start-sm fv-text-primary">
+                    <span v-if="exmps.htw">~{{ exmps.htw }}km</span>
+                  </span>
+                </template>
+                <fvRange v-model="exmps.htw" :data="{from: 1, to: 35}" />
+              </fvFormElement>
+              <fvFormElement class="fv-col-sm-4" label="Is Maried?" inline>
+                <fvSwitch v-model="exmps.married" @input="exmps.marriageDate = undefined" />
+              </fvFormElement>
+              <fvFormElement class="fv-col-sm-8" label="Date of Marriage">
+                <fvDatepicker v-model="exmps.marriageDate" placeholder="Enter Date of Marriage" :disabled="!exmps.married" />
+              </fvFormElement>
+              <fvFormElement class="fv-col" label="Living Continent">
+                <fvSelect
+                  v-model="exmps.continent"
+                  placeholder="Enter Living Continent"
+                  :options="['Africa','Antarctica','Asia','Europe','North America','Australia/Oceania','South America']"
+                  text-key=""
+                  value-key=""
+                  disabled-key=""
+                />
+              </fvFormElement>
+              <fvFormElement class="fv-col-12" label="Biography">
+                <fvTextarea v-model="exmps.bio" placeholder="Enter Your Biography" auto-height />
+              </fvFormElement>
+            </fvForm>
+          </div>
+        </div>
+      </div>
+    </fvContent>
+  </fvMain>
+</template>
+
+<script>
+import Logo from '~/components/Logo.vue'
+import FramevuerkLogo from '~/components/FramevuerkLogo.vue'
+
+export default {
+  components: {
+    Logo,
+    FramevuerkLogo
+  },
+  data () {
+    return {
+      sidebar: false,
+      docsMenu: false,
+      slider: 'One',
+      exmps: {
+        htw: 13,
+        firstName: undefined,
+        lastName: undefined,
+        gender: 'm',
+        continent: undefined,
+        married: undefined,
+        marriageDate: undefined,
+        bio: undefined
+      }
+    }
+  },
+  methods: {
+    toggleSidebar () {
+      this.sidebar = !this.sidebar
+    },
+    toggleDocsMenu () {
+      setTimeout(() => {
+        this.docsMenu = !this.docsMenu
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  margin: 0 auto;
+  max-width: 768px;
+}
+.sidebar {
+  min-width: 300px;
+}
+</style>
diff --git a/template/frameworks/framevuerk/plugins/framevuerk.js b/template/frameworks/framevuerk/plugins/framevuerk.js
new file mode 100644
index 0000000..f995982
--- /dev/null
+++ b/template/frameworks/framevuerk/plugins/framevuerk.js
@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import Framevuerk from 'framevuerk/dist/framevuerk-nuxt.min.js'
+
+export default () => {
+  Vue.use(Framevuerk)
+}
diff --git a/template/nuxt/nuxt.config.js b/template/nuxt/nuxt.config.js
index 79f07cd..5666cbe 100644
--- a/template/nuxt/nuxt.config.js
+++ b/template/nuxt/nuxt.config.js
@@ -36,6 +36,13 @@ module.exports = {
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      <%_ if (ui === 'framevuerk') { _%>,
+      {
+        rel: 'stylesheet',
+        href:
+          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
+      }
+      <%_ } _%>
     ]
   },
   /*
@@ -54,6 +61,8 @@ module.exports = {
     'ant-design-vue/dist/antd.css'
     <%_ } else if (ui === 'tachyons') { _%>
     'tachyons/css/tachyons.css'
+    <%_ } else if (ui === 'framevuerk') { _%>
+    'framevuerk/dist/framevuerk-nuxt.min.css'
     <%_ } _%>
   ],
   /*
@@ -66,6 +75,8 @@ module.exports = {
     '@/plugins/iview'
     <%_ } else if (ui === 'ant-design-vue') { _%>
     '@/plugins/antd-ui'
+    <%_ } else if (ui === 'framevuerk') { _%>
+    '@/plugins/framevuerk'
     <%_ } _%>
   ],
   /*


Test patch:
diff --git a/test/snapshots/index.test.js.md b/test/snapshots/index.test.js.md
index 29b5a1f..6948427 100644
--- a/test/snapshots/index.test.js.md
+++ b/test/snapshots/index.test.js.md
@@ -3212,3 +3212,116 @@ Generated by [AVA](https://ava.li).
       }␊
     }␊
     `
+
+## verify ui: Framevuerk
+
+> Generated package.json
+
+    [
+      '.editorconfig',
+      '.gitignore',
+      'README.md',
+      'assets/README.md',
+      'components/FramevuerkLogo.vue',
+      'components/Logo.vue',
+      'components/README.md',
+      'framevuerk-config.js',
+      'layouts/README.md',
+      'layouts/default.vue',
+      'middleware/README.md',
+      'nuxt.config.js',
+      'package.json',
+      'pages/README.md',
+      'pages/index.vue',
+      'plugins/README.md',
+      'plugins/framevuerk.js',
+      'static/README.md',
+      'static/favicon.ico',
+      'store/README.md',
+    ]
+
+> package.json
+
+    {
+      dependencies: {
+        framevuerk: '^2.2.5',
+        nuxt: '^2.0.0',
+      },
+      devDependencies: {
+        'framevuerk-builder': '^2.0.2',
+        nodemon: '^1.18.9',
+      },
+      private: true,
+      scripts: {
+        build: 'nuxt build',
+        'build:framevuerk': 'framevuerk-builder -c ./framevuerk-config.js',
+        dev: 'nuxt',
+        generate: 'nuxt generate',
+        prepublish: 'npm run build:framevuerk',
+        start: 'nuxt start',
+      },
+    }
+
+> Generated nuxt.config.js
+
+    `␊
+    export default {␊
+      mode: 'universal',␊
+      /*␊
+      ** Headers of the page␊
+      */␊
+      head: {␊
+        title: process.env.npm_package_name || '',␊
+        meta: [␊
+          { charset: 'utf-8' },␊
+          { name: 'viewport', content: 'width=device-width, initial-scale=1' },␊
+          { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }␊
+        ],␊
+        link: [␊
+          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }␊
+    ,␊
+          {␊
+            rel: 'stylesheet',␊
+            href:␊
+              'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'␊
+          }␊
+        ]␊
+      },␊
+      /*␊
+      ** Customize the progress-bar color␊
+      */␊
+      loading: { color: '#fff' },␊
+      /*␊
+      ** Global CSS␊
+      */␊
+      css: [␊
+        'framevuerk/dist/framevuerk-nuxt.min.css'␊
+      ],␊
+      /*␊
+      ** Plugins to load before mounting the App␊
+      */␊
+      plugins: [␊
+        '@/plugins/framevuerk'␊
+      ],␊
+      /*␊
+      ** Nuxt.js dev-modules␊
+      */␊
+      devModules: [␊
+      ],␊
+      /*␊
+      ** Nuxt.js modules␊
+      */␊
+      modules: [␊
+      ],␊
+      /*␊
+      ** Build configuration␊
+      */␊
+      build: {␊
+        /*␊
+        ** You can extend webpack config here␊
+        */␊
+        extend(config, ctx) {␊
+        }␊
+      }␊
+    }␊
+    `