Post
Ask Question

How To Use Phone Mockup Component In Vue.js

In this article, I will guide you on how to use Phone mockup component in Vue.js application.

Prerequisites

  • node.js installed
  • Tailwind CSS

You can check how to install Tailwind CSS  in vue.js from the below link

Create Vue.js Project

To create a Vue.js app, use the following command in the terminal.

vue create tailwindcss

Install daisyUI

Install daisyUI using following npm command

npm i daisyui

Open tailwind.config.js and add following code.

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

Now right-click on the components folder and add a new component named 'phonemockupdemo.vue'. Now open phonemockupdemo.vue component and add the following code. 

<template>
    <div>
        <div class="mockup-phone">
            <div class="camera"></div>
            <div class="display">
                <div class="artboard artboard-demo phone-1">Hi...</div>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'phonemockupdemo',
    props: {
        msg: String
    }
}
</script>
  
<style scoped>
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>

Now open App.vue component. Add the following code in App.vue component.

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

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

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Now run the application by using following command.

npm run serve

We also add color, add the following code in phonemockupdemo.vue component.

Summary

 In this article, we learned how to use Phone mockup component in Vue.js.


Similar Articles