fandogh / nuxt-helpers Goto Github PK

View Code? Open in Web Editor NEW

58.0 58.0 4.0 159 KB

Collection of useful and SSR compatible vue plugins for using with nuxt.js

License: MIT License

JavaScript 100.00%

axios bootstrap bootstrap4 notification nuxt nuxtjs ssr

nuxt-helpers's People

Contributors

Stargazers

Watchers

Forkers

cuulee irobayna alexmoreno gtsigner

nuxt-helpers's Issues

Question about Font-Awesome Helper

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',
       })
     ]
    }
});

Can't find modules

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"
  }
}

bootstrap helper - automatically include css?

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

[REQUEST] FontAwesome?

@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

cannot load module: font-awesome

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 }
  ],
});

.nuxt-helpers directory not created

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

Font-Awesome in node_module Folder Needs An index.js File

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?

Help need

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 -))

fandogh / nuxt-helpers Goto Github PK

nuxt-helpers's People

Contributors

Stargazers

Watchers

Forkers

nuxt-helpers's Issues

Question about Font-Awesome Helper

Can't find modules

bootstrap helper - automatically include css?

[REQUEST] FontAwesome?

cannot load module: font-awesome

.nuxt-helpers directory not created

Font-Awesome in node_module Folder Needs An index.js File

Help need

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent