「nuxt.js」ライブラリvue-selectizeをインストールしてselectboxを作成する

2022年7月18日

環境
Windows 10 Home 64bt
node v14.18.3
npm 6.14.15
yarn　1.22.17
nuxt v2.15.8

操作方法
1.「nuxtselect」という名前でプロジェクトを作成します

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

>npx create-nuxt-app nuxtselect

create-nuxt-app v4.0.0

Generating Nuxt.js project in nuxtselect

? Project name: nuxtselect

? Programming language: JavaScript

? Package manager: Yarn

? UI framework: None

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)

? Testing framework: None

? Rendering mode: Universal (SSR / SSG)

? Deployment target: Server (Node.js hosting)

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)

? What is your GitHub username?

? Version control system: Git

略

? Successfully created project nuxtselect

To get started:

cd nuxtselect

yarn dev

To build & start for production:

cd nuxtselect

yarn build

yarn start

>npx create-nuxt-app nuxtselect create-nuxt-app v4.0.0 Generating Nuxt.js project in nuxtselect ? Project name: nuxtselect ? Programming language: JavaScript ? Package manager: Yarn ? UI framework: None ? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? Testing framework: None ? Rendering mode: Universal (SSR / SSG) ? Deployment target: Server (Node.js hosting) ? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection) ? What is your GitHub username? ? Version control system: Git 略 ? Successfully created project nuxtselect To get started: cd nuxtselect yarn dev To build & start for production: cd nuxtselect yarn build yarn start

>npx create-nuxt-app nuxtselect

create-nuxt-app v4.0.0
  Generating Nuxt.js project in nuxtselect
? Project name: nuxtselect
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username?
? Version control system: Git
略
?  Successfully created project nuxtselect

  To get started:

        cd nuxtselect
        yarn dev

  To build & start for production:

        cd nuxtselect
        yarn build
        yarn start

2.vue-selectizeをインストールします
作成したプロジェクトに移動します

>cd nuxtselect
vue-selectizeのインストール
>yarn add selectize @isneezy/vue-selectize

3.pluginsフォルダ、plugin.jsを作成します
以下のコードを編集します

import Vue from 'vue'
import 'selectize/dist/css/selectize.css'
import VSelectize from '@isneezy/vue-selectize'

Vue.component('v-selectize', VSelectize)

4.プロジェクト配下にnuxt.config.jsに下記のコードを追加します

plugins: [
    {
      src: '@/plugins/plugin',
      mode: 'client'
    }
  ],

5.pages配下にindex.vueを下記の通りに編集します

<template>
  <div class="container">
    <v-selectize v-model="selected" :options="['東京,'大阪','横浜']"/>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
};
</script>

<style>
.container {
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
</style>

6.yarnを起動します
> yarn dev

7.ブラウザから http://プライベートIP:3000にアクセスします