fandogh / nuxt-helpers Goto Github PK
View Code? Open in Web Editor NEWCollection of useful and SSR compatible vue plugins for using with nuxt.js
License: MIT License
Collection of useful and SSR compatible vue plugins for using with nuxt.js
License: MIT License
Hello!. Is there a working example of Auth-Helper with nuxt? Forgive me for the nubian questions, I've been studying PHP all my life, and here life makes me make a spa with the API on Laravel. API I did, but with a SPA problem. Vue is my first JS framework and I do not understand well yet, how it works -))
If the font-awesome
helper already includes the needed css, shouldn't the bootstrap
helper also do the same thing?
It appears right now the boostrap css must be loaded somehow (I am including it via nuxt.config.js
It seems the helper is not working...
The only way I can make it work by adding:
path.resolve(__dirname, 'node_modules/font-awesome/css/font-awesome.css'),
to nuxt.config.js
Any ideas what's wrong?
const NuxtHelpers = require('nuxt-helpers');
const path = require('path');
const webpack = require('webpack');
module.exports = NuxtHelpers('*', {
head: {
title: 'xyz',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', content: 'xyz' },
],
},
loading: { color: '#3B8070' },
css: [
path.resolve(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.css'),
path.resolve(__dirname, 'node_modules/font-awesome/css/font-awesome.css'),
'~assets/stylesheets/main.css',
],
build: {
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
})
]
}
});
Hello Pooya :),
I get this error when I try to use this library.
{ Error: Cannot find module '/home/iman/Documents/Git/nuxt-start/node_modules/nuxt-helpers/lib/bootstrap-vue/_helper.js'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at install (/home/iman/Documents/Git/nuxt-start/node_modules/nuxt-helpers/lib/install.js:54:18)
at helpers.forEach.m (/home/iman/Documents/Git/nuxt-start/node_modules/nuxt-helpers/lib/install.js:35:23)
at Array.forEach (native)
at wrap (/home/iman/Documents/Git/nuxt-start/node_modules/nuxt-helpers/lib/install.js:34:13)
at Object.<anonymous> (/home/iman/Documents/Git/nuxt-start/nuxt.config.js:3:18)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19) code: 'MODULE_NOT_FOUND' }
What's the problem with my below configuration:
nuxt.config.js
const NuxtHelpers = require('nuxt-helpers');
module.exports = NuxtHelpers(['bootstrap-vue'], {
});
And here is my package.json
{
"name": "Hello World in Nuxt :)",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "Iman Tabrizian <[email protected]>",
"private": true,
"dependencies": {
"axios": "^0.16.0",
"bootstrap-vue": "^0.11.1",
"js-cookie": "^2.1.4",
"mini-toastr": "^0.6.5",
"nuxt": "latest",
"nuxt-helpers": "^0.7.0",
"vue-notifications": "^0.7.6"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"css-loader": "^0.28.0",
"eslint": "^3.15.0",
"eslint-config-standard": "^6.2.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.1",
"eslint-plugin-standard": "^2.0.1",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"vue-style-loader": "^2.0.5"
}
}
Hi,
I just installed this plugin and find out the .nuxt-helpers not created. How we can debug, make sure the plugin really loaded. Thanks
@pi0 First of all, thank you for maintaining nuxt-helpers. I am a newbie and they sure help me adding new functionality in a straightforward manner.
Any plans for other helpers? How about FontAwesome?
Not sure how involved it is to add a new helper. If you are willing to guide me I would be happy to submit a Pull Request.
Thanks
I installed font-awesome via npm, but it turned out that the nuxt helper could not find the dependency.
Here was my package.json
{
"name": "nuxt_test",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "aver803bath5 <[email protected]>",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"babel-preset-es2015": "^6.24.1",
"element-ui": "^1.3.5",
"font-awesome": "^4.7.0",
"nuxt": "latest",
"pug": "^2.0.0-rc.2",
"vue-i18n": "^7.0.1",
"vue-resize": "^0.1.3"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.5.2",
"babel-preset-stage-0": "^6.24.1",
"eslint": "^3.15.0",
"eslint-config-standard": "^6.2.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.1",
"eslint-plugin-standard": "^2.0.1",
"webpack": "^2.6.1"
}
}
And my nuxt.config.js
const NuxtHelpers = require('nuxt-helpers')
module.exports = NuxtHelpers(
[
'axios',
'font-awesome'
],
{
head: {
title: 'XXXX',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [
'element-ui/lib/theme-default/index.css'
],
loading: { color: '#20A0FF' },
plugins: [
{ src: '~plugins/element-ui', ssr: true },
'~plugins/i18n.js',
{ src: '~plugins/vue-resize', ssr: false }
],
build: {
vendor: [
'element-ui',
'vue-i18n'
],
extend (config, ctx) {
if (ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
config.module.rules.push(
{
test: /.js$/,
use: 'babel-loader'
}
)
}
}
}
)
I could find font-awesome in my node_modules folder, but it kept say that it could not find font-awesome dependency.
But, when I add an empty index.js file in the font-awesome folder which is in the node_modules folder. I magically solved this problem. Did I do anything wrong?
font-awesome is installed, so not sure what the problem might be
[Nuxt Helpers] font-awesome:
- Dependency not installed: font-awesome
here is my nuxt.config.js:
const NuxtHelpers = require('nuxt-helpers');
const path = require('path');
module.exports = NuxtHelpers(['axios', 'bootstrap-vue', 'font-awesome'], {
/*
** Headers of the page
*/
head: {
title: 'PQM',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#3B8070' },
rootDir: __dirname,
css: [
path.resolve(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.css'),
path.resolve(__dirname, 'node_modules/bootstrap-vue/dist/bootstrap-vue.css')
],
/*
** Build configuration
*/
build: {
},
plugins: [
{src: '~plugins/highcharts.js', ssr: false }
],
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.