Vuetify Template

index.html

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-form >
            <v-container @click="showDetails()">
                <v-row class="some-class">
                    <v-col cols="3" sm="3" v-for="p in placeholders" :key="p">
                        <v-text-field  :placeholder="p" single-line outlined >
                        </v-text-field>
                    </v-col>
                </v-row>
            </v-container>
        </v-form>
      </v-container>
    </v-content>
  </v-app>
</div>

script.js

// Looking for the v1.5 template?
// https://codepen.io/johnjleider/pen/GVoaNe

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    placeholders: ["Title1", "Title2", "Title3", "Title4", "Title5", "Title6", "Title7", "Title8"]
  })
})

scripts

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

style.css

.some-class{
  flex-wrap: nowrap;
  overflow-x: auto;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />

vuetify-template.markdown

Vuetify Template

A Pen by victor herasme on CodePen.

License.