Skip to content

Vue.js

Official

Articles

TIPS

動的コンポーネント

  • コンポーネント — Vue.js

    予約された <component> 要素と、その is 属性に動的に束縛することで、同じマウントポイントで複数のコンポーネントを動的に切り替えることができます

遅延ローディング (vue-router)

UI Frameworks

Storybook
UI dev environment you'll love to use - Storybook for Vue - Vue on Storybook // Speaker Deck

Buefy

Semantic UI

UIKit

Element

Vuesax

Framework7

UI Components

Dev

lakb248/vue-pull-refresh
A pull down refresh component implement by vuejs

vue-router

ディレクティブ

v-for

v-cloak

<style>
[v-cloak] {
  display: none;
}
</style>

<div id="app">
  <div v-cloak>{{ foo }}</div>
</div>

Plugins

Validation

Google Analytics

Express

express-vue (SSR)
Vue rendering engine for Express.js. Use .Vue files as templates using streams

Nuxt.js

Nuxt.js starter template

nuxt-community/starter-template
Nuxt.js starter project template.
nuxt-community/express-template
Starter template for Nuxt.js with Express.

グローバルCSSとプリプロセッサ

リクエストデータをコンポーネントで扱う

リクエストデータをコンポーネントで扱うには body-parser を組み込む。ここで例示されているサンプルはNuxt.jsのバージョンが古いので注意。POSTリクエストのbodyの他にもいろいろ参照可能。

Express のミドルウェアとして body-parser をセットする順序に注意。 以下のように API Routes の前に定義しないと正しく動作しなかった。

server/index.js

app.set('port', port)

// Express middlewares (need to load before routes)
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// Import API Routes
app.use('/api', api)

pages/*.vue

async asyncData ({ req }) {
  let body = {}
  if (req && req.body) {
    body = req.body
  }
  return { body }
},

Electron

SimulatedGREG/electron-vue
An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack. - フロントエンド開発初心者がelectron-vueでアプリをつくってみた その2~実装編~ - Qiita