vue-tailwind
vue-tailwind copied to clipboard
Published
20 hours ago •
alfonsobries
alfonsobries
How to use Dialog api in nuxt
this.$dialog is undefined in nuxt , can you plz tell how can i use it in nuxt?
@scriptburn The docs from this project use nuxt, so I can confirm that the $dialog it's working in normal circumstances. Maybe you are not registering the library correctly. If you share part of your code and how you are installing the library, I may give you a better solution,
Thank you for reply :)
My package.json
"name": "frontend",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "export NODE_ENV=local && nuxt",
"build": "export NODE_ENV=local && nuxt build",
"build_production": "export NODE_ENV=production && yarn nuxt generate -c nuxt.config.js",
"build_and_deploy_production": "yarn build_production && ./deploy_production",
"start": "nuxt start",
"export": "nuxt export",
"serve": "nuxt serve",
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lint": "yarn lint:js"
},
"dependencies": {
"@nuxtjs/auth": "^4.9.1",
"@nuxtjs/axios": "^5.12.1",
"@nuxtjs/proxy": "^2.1.0",
"@nuxtjs/router": "^1.5.1",
"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/ui": "^0.5.0",
"lodash": "^4.17.21",
"node-sass": "^5.0.0",
"numeral": "^2.0.6",
"nuxt": "^2.14.4",
"nuxt-purgecss": "^1.0.0",
"sass-loader": "^10.1.1",
"vue-lodash": "^2.1.2",
"vue-tailwind": "^2.1.3"
},
"devDependencies": {
"@nuxtjs/eslint-config": "^3.1.0",
"@nuxtjs/eslint-module": "^2.0.0",
"@nuxtjs/tailwindcss": "^3.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^7.7.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-prettier": "^3.1.4",
"prettier": "^2.0.5"
}
}
My tailwindconfig.js
** TailwindCSS Configuration File
**
** Docs: https://tailwindcss.com/docs/configuration
** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
*/
module.exports = {
theme: {
extend: {
colors: {
white: '#FFFFFF',
blue: '#007ace',
},
},
},
variants: {
backgroundColor: ({ after }) => after(['disabled']),
extend: {
padding: ['hover'],
opacity: ['disabled'],
cursor: ['disabled'],
},
},
plugins: [],
purge: {
// Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
enabled: false,
content: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'nuxt.config.js',
require('@tailwindcss/forms'),
require('@tailwindcss/ui'),
],
},
}
my nuxt.config.js
const fs = require('fs')
const path = require('path')
const envPath = { path: '' }
const basePath = path.join(__dirname, '/')
const nodeEnv = process.env.NODE_ENV || 'local'
const baseEnv = basePath + '.env'
const baseNodeEnv = baseEnv + '.' + nodeEnv
// import ExtractTextPlugin from 'extract-text-webpack-plugin';
if (fs.existsSync(baseNodeEnv)) {
envPath.path = baseNodeEnv
} else if (fs.existsSync(baseEnv)) {
envPath.path = baseEnv
}
if (envPath.path) {
const envConfig = require('dotenv').parse(fs.readFileSync(envPath.path))
for (const k in envConfig) {
process.env[k] = envConfig[k]
}
}
const apiUrl = process.env.API_URL
const publicUrl = process.env.PUBLIC_URL || ''
const routeBase = process.env.ROUTER_BASE || '/'
console.log(
envPath.path ? 'Using env file :' + envPath.path : 'Not using env',
{
apiUrl,
publicUrl,
routeBase,
}
)
export default {
loading: {
color: 'red',
height: '3px',
},
generate: {
dir: 'dist/' + nodeEnv,
},
ssr: false,
env: {
env_name: nodeEnv,
apiUrl,
publicUrl,
},
axios: {
baseURL: process.env.NO_PROXY ? process.env.API_URL : '',
proxy: !process.env.NO_PROXY,
credentials: true, // this means that in the request the httponly cookie should be sent
},
auth: {
redirect: {
login: '/login',
logout: '/login',
callback: '/dashboard',
home: '/dashboard',
},
strategies: {
local: {
endpoints: {
login: {
url: '/api/auth/login',
method: 'post',
propertyName: 'data.token',
},
logout: { url: '/api/auth/logout', method: 'post' },
user: { url: '/api/auth/user', method: 'get', propertyName: 'data' },
},
},
},
},
auth1: {
redirect: {
login: '/login',
logout: '/login',
callback: '/',
home: '/',
},
strategies: {
local: {
endpoints: {
login: { url: '/login', method: 'post', propertyName: false },
logout: { url: '/logout', method: 'post', propertyName: false },
user: { url: '/api/user', method: 'get', propertyName: false },
},
tokenRequired: true,
},
},
},
router: { base: routeBase, mode: 'hash', middleware: ['auth'] },
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'static',
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || '',
},
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
/*
** Global CSS
*/
css: ['~/assets/scss/tailwind.scss'],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
'~plugins/filters',
'~plugins/vue-tailwind',
'~plugins/functions',
'~plugins/lodash',
],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
// '@nuxtjs/eslint-module',
// Doc: https://github.com/nuxt-community/nuxt-tailwindcss
'@nuxtjs/tailwindcss',
],
/*
** Nuxt.js modules
*/
modules: [
'@nuxtjs/axios',
'@nuxtjs/auth',
'nuxt-purgecss',
'@nuxtjs/proxy',
'@nuxtjs/router',
],
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
extractCSS: true,
publicPath: publicUrl,
postcss: {
plugins: { tailwindcss: path.resolve(__dirname, './tailwind.config.js') },
},
},
purgeCSS: { mode: 'postcss' },
proxy: {
'/api': apiUrl,
},
}
my plugins/vue-tailwind.js
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import {
TInput,
TTextarea,
TSelect,
TRadio,
TCheckbox,
TButton,
TInputGroup,
TCard,
TAlert,
TModal,
TDropdown,
TRichSelect,
TPagination,
TTag,
TRadioGroup,
TCheckboxGroup,
TTable,
TDatepicker,
TToggle,
TDialog,
} from 'vue-tailwind/dist/components'
const settings = {
't-table': {
component: TTable,
props: {
classes: {
table:
'min-w-full divide-y divide-gray-100 shadow-sm border-gray-200 border',
thead: '',
theadTr: '',
theadTh: 'px-3 py-2 font-semibold text-left bg-gray-100 border-b',
tbody: 'bg-white divide-y divide-gray-100',
tr: '',
td: 'px-3 py-2 whitespace-no-wrap',
tfoot: '',
tfootTr: '',
tfootTd: '',
},
variants: {
thin: {
td: 'p-1 whitespace-no-wrap text-sm',
theadTh: 'p-1 font-semibold text-left bg-gray-100 border-b text-sm',
},
},
},
},
't-input': {
component: TInput,
props: {
fixedClasses:
'block w-full px-3 py-2 transition duration-100 ease-in-out border rounded shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
classes:
'text-black placeholder-gray-400 bg-white border-gray-300 focus:border-blue-500 ',
variants: {
danger: 'border-red-300 bg-red-50 placeholder-red-200 text-red-900',
success:
'border-green-300 bg-green-50 placeholder-gray-400 text-green-900',
},
},
},
't-textarea': {
component: TTextarea,
props: {
classes: 'border-2 block w-full rounded text-gray-800',
// ...More settings
},
},
't-alert': {
component: TAlert,
props: {
fixedClasses: {
wrapper: 'relative flex items-center p-4 border-l-4 rounded shadow-sm',
body: 'flex-grow',
close:
'absolute relative flex items-center justify-center ml-4 flex-shrink-0 w-6 h-6 transition duration-100 ease-in-out rounded focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
closeIcon: 'fill-current h-4 w-4',
},
classes: {
wrapper: 'bg-blue-50 border-blue-500',
body: 'text-blue-700',
close: 'text-blue-500 hover:bg-blue-200',
},
variants: {
danger: {
wrapper: 'bg-red-50 border-red-500',
body: 'text-red-700',
close: 'text-red-500 hover:bg-red-200',
},
success: {
wrapper: 'bg-green-50 border-green-500',
body: 'text-green-700',
close: 'text-green-500 hover:bg-green-200',
},
},
},
},
't-button': {
component: TButton,
props: {
fixedClasses:
'block px-4 py-2 transition duration-100 ease-in-out focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
classes:
'text-white bg-blue-500 border border-transparent shadow-sm rounded hover:bg-blue-600',
variants: {
secondary:
'text-gray-800 bg-white border border-gray-300 shadow-sm hover:text-gray-600',
error:
'text-white bg-red-500 border border-transparent rounded shadow-sm hover:bg-red-600',
success:
'text-white bg-green-500 border border-transparent rounded shadow-sm hover:bg-green-600',
link: 'text-blue-500 underline hover:text-blue-600',
},
},
},
't-select': {
component: TSelect,
props: {
fixedClasses:
'block w-full pl-3 pr-10 py-2 transition duration-100 ease-in-out border rounded shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
classes:
'text-black placeholder-gray-400 bg-white border-gray-300 focus:border-blue-500 ',
variants: {
danger: 'border-red-300 bg-red-50 placeholder-red-200 text-red-900',
success:
'border-green-300 bg-green-50 placeholder-gray-400 text-green-900',
},
},
},
't-dialog': {
component: TDialog,
props: {
fixedClasses: {
wrapper: 'relative flex items-center p-4 border-l-4 rounded shadow-sm',
body: 'flex-grow',
close:
'absolute relative flex items-center justify-center ml-4 flex-shrink-0 w-6 h-6 transition duration-100 ease-in-out rounded focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
closeIcon: 'fill-current h-4 w-4',
},
classes: {
wrapper: 'bg-blue-50 border-blue-500',
body: 'text-blue-700',
close: 'text-blue-500 hover:bg-blue-200',
},
variants: {
danger: {
wrapper: 'bg-red-50 border-red-500',
body: 'text-red-700',
close: 'text-red-500 hover:bg-red-200',
},
success: {
wrapper: 'bg-green-50 border-green-500',
body: 'text-green-700',
close: 'text-green-500 hover:bg-green-200',
},
},
},
},
// ...Rest of the components
}
Vue.use(VueTailwind, settings)