<\/div>\n<\/div>\n
vue create vue-animated-ui<\/code><\/pre>\nAnswer Vue CLI questions with following choices.<\/p>\n
# ? Please pick a preset: Manually select features<\/span>\r\n# ? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter<\/span>\r\n# ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes<\/span>\r\n# ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass\/SCSS (with dart-sass)<\/span>\r\n# ? Pick a linter \/ formatter config: Basic<\/span>\r\n# ? Pick additional lint features: Lint on save<\/span>\r\n# ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json<\/span>\r\n# ? Save this as a preset for future projects? (y\/N) No<\/span><\/code><\/pre>\nHead over to project folder.<\/p>\n
cd vue-animated-ui<\/code><\/pre>\nStart to see the latest created Vue app on the browser window.<\/p>\n
npm run serve<\/code><\/pre>\n<\/div>\n\n
Adding Bootstrap 4 in Vue.js<\/h2>\n
To use the Bootstrap UI components, we need to install the Bootstrap module in our Vue app.<\/p>\n
npm<\/span> install<\/span> bootstrap\r\n\r\n# or<\/span>\r\n\r\nyarn<\/span> add<\/span> bootstrap<\/code><\/pre>\nImport Bootstrap path in the\u00a0main.js<\/strong>\u00a0file. It makes Bootstrap module available throughout our app.<\/p>\nimport<\/span> Vue from<\/span> 'vue'<\/span>\r\nimport<\/span> App from<\/span> '.\/App.vue'<\/span>\r\nimport<\/span> router from<\/span> '.\/router'<\/span>\r\n\r\nimport<\/span> 'bootstrap\/dist\/css\/bootstrap.min.css'<\/span>\r\n\r\nVue.<\/span>config.<\/span>productionTip =<\/span> false<\/span>\r\n\r\nnew<\/span> Vue<\/span>(<\/span>{<\/span>\r\n router,<\/span>\r\n render<\/span>:<\/span> h<\/span> =><\/span> h<\/span>(<\/span>App)<\/span>\r\n}<\/span>)<\/span>.<\/span>$mount<\/span>(<\/span>'#app'<\/span>)<\/span><\/code><\/pre>\nWe also need to define the Font Awesome icon CDN path in the public\/index.html. It allow us to add some useful icons in our Vue app.<\/p>\n
<<\/span>link rel<\/span>=<\/span>\"<\/span>stylesheet\"<\/span><\/span> href<\/span>=<\/span>\"<\/span>https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"<\/span><\/span>><\/span><\/span><\/code><\/pre>\n<\/div>\n\n
Adding Global CSS in Vue.js Project<\/h2>\n
Let\u2019s look at the most asked question regarding Vue that how to add global styles via CSS in a Vue.js project.<\/p>\n
Create a\u00a0css<\/strong>\u00a0folder inside the\u00a0src\/assets<\/strong>\u00a0folder then create the main.css file in it.<\/p>\nDefine the global CSS path inside the\u00a0main.js<\/strong>\u00a0file just below the Bootstrap path.<\/p>\nimport<\/span> Vue from<\/span> 'vue'<\/span>\r\nimport<\/span> App from<\/span> '.\/App.vue'<\/span>\r\nimport<\/span> router from<\/span> '.\/router'<\/span>\r\n\r\nimport<\/span> 'bootstrap\/dist\/css\/bootstrap.min.css'<\/span>\r\nimport<\/span> '@\/assets\/css\/main.css'<\/span>\r\n\r\nVue.<\/span>config.<\/span>productionTip =<\/span> false<\/span>\r\n\r\nnew<\/span> Vue<\/span>(<\/span>{<\/span>\r\n router,<\/span>\r\n render<\/span>:<\/span> h<\/span> =><\/span> h<\/span>(<\/span>App)<\/span>\r\n}<\/span>)<\/span>.<\/span>$mount<\/span>(<\/span>'#app'<\/span>)<\/span><\/code><\/pre>\nAdd the common style of our primary authentication components in\u00a0assets\/css\/main.css<\/strong>\u00a0file.<\/p>\n*<\/span> {<\/span>\r\n box-sizing<\/span>:<\/span> border-box;<\/span>\r\n}<\/span>\r\n\r\nbody<\/span> {<\/span>\r\n background<\/span>:<\/span> #2554FF !important<\/span>;<\/span>\r\n min-height<\/span>:<\/span> 100vh;<\/span>\r\n display<\/span>:<\/span> flex;<\/span>\r\n font-weight<\/span>:<\/span> 400;<\/span>\r\n}<\/span>\r\n\r\nbody,\r\nhtml,\r\n.App,\r\n.vue-tempalte,\r\n.vertical-center<\/span> {<\/span>\r\n width<\/span>:<\/span> 100%;<\/span>\r\n height<\/span>:<\/span> 100%;<\/span>\r\n}<\/span>\r\n\r\n.navbar-light<\/span> {<\/span>\r\n background-color<\/span>:<\/span> #ffffff;<\/span>\r\n box-shadow<\/span>:<\/span> 0px 14px 80px rgba<\/span>(<\/span>34,<\/span> 35,<\/span> 58,<\/span> 0.2)<\/span>;<\/span>\r\n}<\/span>\r\n\r\n.vertical-center<\/span> {<\/span>\r\n display<\/span>:<\/span> flex;<\/span>\r\n text-align<\/span>:<\/span> left;<\/span>\r\n justify-content<\/span>:<\/span> center;<\/span>\r\n flex-direction<\/span>:<\/span> column;<\/span> \r\n}<\/span>\r\n\r\n.inner-block<\/span> {<\/span>\r\n width<\/span>:<\/span> 450px;<\/span>\r\n margin<\/span>:<\/span> auto;<\/span>\r\n background<\/span>:<\/span> #ffffff;<\/span>\r\n box-shadow<\/span>:<\/span> 0px 14px 80px rgba<\/span>(<\/span>34,<\/span> 35,<\/span> 58,<\/span> 0.2)<\/span>;<\/span>\r\n padding<\/span>:<\/span> 40px 55px 45px 55px;<\/span>\r\n border-radius<\/span>:<\/span> 15px;<\/span>\r\n transition<\/span>:<\/span> all .3s;<\/span>\r\n}<\/span>\r\n\r\n.vertical-center .form-control:focus<\/span> {<\/span>\r\n border-color<\/span>:<\/span> #2554FF;<\/span>\r\n box-shadow<\/span>:<\/span> none;<\/span>\r\n}<\/span>\r\n\r\n.vertical-center h3<\/span> {<\/span>\r\n text-align<\/span>:<\/span> center;<\/span>\r\n