Vue2.6でComposition APIを使う #vue.js2

Vue2.6でComposition APIを使う方法があった!

Githubのこちらのページからインストールできます。
https://github.com/vuejs/composition-api
npmのページはこちら
https://www.npmjs.com/package/@vue/composition-api

npmパッケージをインストール

npm install @vue/composition-api

main.js

import Vue from 'vue'
import App from './App.vue'
import VueCompositionAPI from '@vue/composition-api' // 追加

Vue.use(VueCompositionAPI) // 追加

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
  }
}
</script>

<style>

</style>

HelloWorld.vue

<template>
  <div>
    <h1>Hellow world Component</h1>
    <h2>{{ title }}</h2>
    <p>{{ count }}</p>
    <button @click="increment">Count Up</button>
  </div>
</template>

<script>
import { defineComponent, ref } from "@vue/composition-api";

export default defineComponent({
  setup() {
    const title = ref("Vue2.6");
    const count = ref(0);

    const increment = () => {
      return count.value++
    }

    return {
      title, count, increment,
    };
  },
});
</script>

<style scoped>
h1 {
  color: blue;
}

h2 {
  color: green;
}

p {
  color: red;
}
</style>

実行結果

CSSのフレームワークはどれがいい?

Vuetifyをインストールしてみたが、文字しか表示されていなかった!
UIライブラリーは、導入が難しいかも?
BootstrapVueは、Vue2.6にしか対応してないように書かれていた?
BootStrap5は問題なし!これでいこう...

自分で見た目を整えたいでも生のCSSは...
sassを導入することにした。後から追加するときは、npmを使う。

npm i sass

sass-loaderがないとエラーが出るのでインストールする。

npm i sass-loader

package.json

{
  "name": "comp-api",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/composition-api": "^1.4.9",
    "bootstrap": "^5.0.1",
    "core-js": "^3.8.3",
    "sass": "^1.50.0",
    "sass-loader": "^12.6.0",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

main.js

import Vue from 'vue'
import App from './App.vue'
import VueCompositionAPI from '@vue/composition-api' // composition-apiをインポート
import "bootstrap/dist/css/bootstrap.min.css"; // bootstrap5をインポート

Vue.use(VueCompositionAPI) // 追加

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

HellowWorld.vue

<template>
  <div class="container">
    <div class="col align-self-center">
      <h1>Hellow world Component</h1>
      <h2>{{ title }}</h2>
      <p>{{ count }}</p>
      <button type="button" class="btn btn-primary" @click="increment">CountUp</button>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "@vue/composition-api";

export default defineComponent({
  setup() {
    const title = ref("Vue2.6");
    const count = ref(0);

    const increment = () => {
      return count.value++
    }

    return {
      title, count, increment,
    };
  },
});
</script>

<style lang="scss">
.container {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  h1 {
  color: blue;
  }

  h2 {
    color: green;
  }

  p {
    color: red;
    font-weight: bold;
  }
}
</style>

実行結果

最後に

Vue2.6でもVue3で導入されたCompositionAPIを使えるようになり、コードが見やすくなりました。
CSSについてですが、フレームワークにあまり頼らない方がいいかも...
バージョンの差分で使えないものもあり、安定していないものもあります。