Git Product home page Git Product logo

vue-2-boilerplate's Introduction

Welcome to my page!

Hello there

I'm Peter. A full-stack developer living in The Netherlands.

Techstack

React Next.js tRPC Radix UI React Query Tailwind CSS React Router Styled Components Redux

My open source projects

📦 Projects ⭐ Stars 📚 Forks ‼️ Issues ⬇️ Pull requests
Vue 2 Boilerplate Stars Forks Issues Pull Requests
Chatr Stars Forks Issues Pull Requests
Shorty Stars Forks Issues Pull Requests
YATA Stars Forks Issues Pull Requests

vue-2-boilerplate's People

Contributors

berniwittmann avatar dennissnijder avatar dependabot[bot] avatar fntneves avatar jamesjieye avatar mvakili avatar petervmeijgaard avatar shuaibird avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-2-boilerplate's Issues

Opening index.html over file:// won't work.

When i build scrips i get this error

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

I think it's script can't write in index.html

Windows Scaffolding issue

Hi! Scaffolding in windows is kinda broken for me.

  1. By default it drops:

`E:\01 Coding\order\task\create-component\task.js:3
class CreateComponent {
^^^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet sup
ported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:968:3

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "create" "page" "agents"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] create: node task/create-component/task.js "page" "agents"
npm ERR! Exit status 1

But this can be fixed by adding "use strict"; to the top of the \task\create-component\task.js

  1. Then it exits with:

E:\01 Coding\order>npm run create page agents

[email protected] create E:\01 Coding\order
node task/create-component/task.js "page" "agents"

Start create-component task
Create main component: agents
fs.js:794
return binding.mkdir(pathModule._makeLong(path),
^

Error: ENOENT: no such file or directory, mkdir 'E:\src\app\pages\agents'
at Error (native)
at Object.fs.mkdirSync (fs.js:794:18)
at CreateComponent.createMain (E:\01 Coding\order\task\create-component\task
.js:92:8)
at CreateComponent.init (E:\01 Coding\order\task\create-component\task.js:71
:10)
at new CreateComponent (E:\01 Coding\order\task\create-component\task.js:51:
10)
at Object. (E:\01 Coding\order\task\create-component\task.js:143:
1)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "create" "page" "agents"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] create: node task/create-component/task.js "page" "agents"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] create script 'node task/create-component/task.js "page" "agents"'.
npm ERR! This is most likely a problem with the vue-2-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node task/create-component/task.js "page" "agents"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-2-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls vue-2-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! E:\01 Coding\order\npm-debug.log

It looks like the app path is not recognized correctly (mkdir 'E:\src\app\pages\agents', and my app full path is "E:\01 Coding\order")

Debug log:
npm-debug.log.txt

Can't make it work under docker.

Hi,
Could you deliver sample dockerfile that would work with this boilerplate?
I can't make it work, mine is:
FROM node:4.6.1

RUN apt-get update && apt-get install python-dev -y
RUN npm cache clean -f
RUN npm install [email protected] -g

RUN mkdir /project
&& chmod -R 777 /project

RUN useradd -ms /bin/bash docker
USER docker

WORKDIR /project

#CMD [bash]

after npm run dev i get:
(Error is somehow connected with babel I guess)

error in ./src/App.vue

Syntax Error: Unexpected token {

@ ./src/main.js 50:0-24
@ multi ./build/dev-client ./src/main.js

error in ./src/routes/index.js

Syntax Error: Unexpected token (13:21)

11 | path: '/home',
12 | name: 'home.index',

13 | component: () => import('@/pages/Home/Index'),
|

Windows installation from scratch

I was not able to use it in windows from scratch until:

added 'linebreak-style': ["error", "windows"] to .eslintrc.js
and run npm install babel-runtime --save

Babel error infrequently

Intermittently, npm run dev would throw:

ERROR in ./src/app/store/modules/account/mutations.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/defineProperty' in ./src/app/store/modules/account
 @ ./src/app/store/modules/account/mutations.js 7:23-70

ERROR in ./src/app/store/modules/auth/mutations.js
Module not found: Error: Cannot resolve module 'babel-runtime/helpers/defineProperty' in ./src/app/store/modules/auth
 @ ./src/app/store/modules/auth/mutations.js 7:23-70

ERROR in ./src/app/transformers/account.js
Module not found: Error: Cannot resolve module 'babel-runtime/core-js/object/get-prototype-of' in ./src/app/transformers
 @ ./src/app/transformers/account.js 7:22-78

Running npm install babel-runtime --save resolved

Computed properties within page javascript

I'm wanting to retrieve a users data from my external API when someone views a profile page by grabbing the users ID within the route params. The issue is when the server responds I can't just go this.user = response since this is undefined as it's not in a Vue file. I'm not sure if I'm using the boilerplate correctly in this case.

Am I going to need to setup an entire new vuex state to hold the data I'm trying to access then retrieve it from there? I just don't understand on how you could achieve this in the way the boilerplate is setup as all my users data is not being updated after the response and continues to be null.

import Vue from 'vue';

let user = null;

export default {
  data() {
    return {
      user,
    };
  },
  computed: {
    user: () => {
      return user;
    }
  },
  created: () => {
    Vue.$http.get(`/users/${Vue.router.app._route.params.id}`)
      .then((response) => {
        user = response.data;
      });
  },
  components: {
    VLayout: require('layouts/default/default.vue'),
    VPanel: require('components/panel/panel.vue'),
  }
};

Error trying to require SASS in bootstrap js

I am trying to require SASS instead of stylus in bootstrap.js by replacing

require('./assets/stylus/app.styl');

with

require('./assets/scss/app.scss');

but I get this error

This relative module was not found:
* ./assets/scss/app.scss in ./src/bootstrap.js

and in browser

ERROR in ./src/bootstrap.js
Module not found: Error: Can't resolve 'style' in '/Users/james/Documents/Projects/vue-test2'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'style-loader' instead of 'style',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
 @ ./src/bootstrap.js 78:0-34
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

Is this possible a misconfiguration in the utils.js file to do with styleLoaders function or the generateLoaders() function?

I have all necessary dependancies installed:
sass-loader
style-loader
css-loader
node-sass

Vuex structure without code duplications

Hi! I think this question excites many users and maybe it is worth adding to boilerplate as example code.

Vuex based on global state and if you want to use form validation (server side) and API pagination your should duplicate state object for any CRUD operation.

So, for example how use pagination with vuex:

// src/store/modules/position/actions.js
import Transformer from '@/transformers/PositionTransformer';
import PositionProxy from '@/proxies/PositionProxy';
import _ from 'lodash';

export const all = ({ commit }, payload) => {
  const page = _.get(payload, 'page', 1);
  new PositionProxy(payload)
    .setParameters({ page, per_page: 5 }).all().then((response) => {
      commit('ALL', Transformer.fetchCollection(response.data));
      commit('PAGINATE', Transformer.paginate(response.meta.pagination));
    });
};

export const create = ({ commit }, payload) => {
  new PositionProxy().create(payload).then((response) => {
    commit('ACTION_MESSAGE', response.message, { root: true });
  }).catch((response) => {
    if (response.status === 422) {
      commit('VALIDATION', response.data.error.validation);
    }
  });
};

export default {
  all,
  create,
};

// src/store/modules/position/mutations.js
export default {
  ['PAGINATE'](state, pagination) {
    state.pagination = pagination;
  },
  ['ALL'](state, items) {
    //console.log(items);
    state.all = items;
  },
  ['VALIDATION'](state, array) {
    state.validation = array;
  },
};

// src/store/modules/position/state.js
export default {
  all: [],
  pagination: {
    total: 0,
    perPage: 5,
    currentPage: 1,
    totalPages: 1,
    links: []
  },
  validation: []
};

// getters.js and index.js like as boilerplate

Position is a CRUD object which have a two standard things: pagination for list all items in table and server side validation .

If u want add more CRUD object this things will be same and always will be duplicate. Because state should be unique for any object. If pagination will become global state, multiple tables will be works together on the one page. Same situation with validation, if use global validation state for any form.

Okay, I can merge object to prevent duplicate for vuex module files. But what do with duplications in actions of create/update/delete actions where I should handle validation? This part:

//...
  }).catch((response) => {
    if (response.status === 422) {
      commit('VALIDATION', response.data.error.validation);
    }
  });

Maybe your know how to solve this problem? How to put it in a common place (commit() allow only in action callback)?

How to use the mixin ?

hi sir.. i try to write a mixin inside a module and try to get it as import { mixin } from '@/store/modules/account';
this doest work but this one
import { mixin } from '@/store/modules/account/mixin';

am i doing it right ?
thanks

webpack4

This is my favorite boilerplate for vue, and I've tested a lot.
Any chance that this will be maintained again and ported to support webpack4 and all the latest versions?

data binding at default layout

hi i'm new to vuejs.

i want to put some logic into layout component. ( login, register modal )
but slot content is disappeared after update binding.

for example.
i modified layouts -> minimal.html

<div
  class="container"
>
  {{ test }}
  <input type="text" v-model="test">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <slot></slot>
    </div>
  </div>
</div>

and layouts -> minimal.js

export default {
    data() {
        return {
            test: 'test'
        }
    }
};

after change input box, pages -> login -> index content was disappeared.

is it normal? i thought layout is also vue component.

thank you.

just read the code, a fucking greate one!!

u can close this issue at any time, just want to tell u I like this boilerplate!!

for before I have been spend a lot of time on writing vue/vuex 1.0 app!

now trying to move in to 2.0!

HOLA!!!

Change base href

Hello everyone.

This is the situation, I successfully deployed my application on server using the default base href, that is: www.my-site.com
but my problem was, when I tried to deployed on a preexisting site, in a sub-folder, something like this:
www.pre-existing-site.com/**my-app**

I only get a blank page with theses erros on console
manifest.da43be1555a119727311.js:1 Uncaught SyntaxError: Unexpected token < vendor.abe8c51c49b85b8961c6.js:1 Uncaught SyntaxError: Unexpected token < app.df6b4dc9228211035998.js:1 Uncaught SyntaxError: Unexpected token <

I know this erros is related to the base href settings to the assets path, and I know there's a way to config this in an Angular project, but I didn't manage to config this on this project.

My question is, how can I config this the base href on build projects?
Thanks you all.

help question

hi sir.. is there any other way to use existing jquery with this boilerplate ? because i have this working UI with jquery and i want to use it and make the data with vuejs ..
thanks sir.

Steps to Deployment?

Hey,

Thanks for the time to put together this boiler-plate. The following may seem stupid, but what are the steps to deploy this to a server? I've looked around a bit and this step seems to be oft-neglected on the web. I was hoping that everything would compile down to HTML, JS and CSS, and it wouldn't need node on the server to run, but I think I'm mistaken?

Regards,
Devon Mather

Set header to 'null' in logout breaks future xhr requests

In app/store/modules/auth/mutations.js on line 25:
Vue.http.headers.common.Authorization = null;

When this is fired and future xhr request are made, these request will fail because of the error: null is not an object (evaluating 'str.replace') in the trim function of vue-resource

It is fixed by replacing that line by:
Vue.http.headers.common.Authorization = '';

How to apply url-loader for stylus urls?

Your boilerplate is great! I have a question:

I wrote in src/assets/styles/app.styl this:

.logo {background-image: url('/static/img/logo.png')}

But seems like it is not affected with webpack url-loader - I expected hashed url in builded project, but it is not. Can you please give the example about how to correctly configure webpack to apply url-loader for urls inside .styl files? Thank you!

Consider Removing vue-resource From This Boilerplate

vue-resource is being retired: https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.xk0b5eimw

Note that this is different from deprecated. It just isn't an official recommendation anymore. To quote the reasoning:

  1. Unlike routing and state-management, ajax is not a problem domain that requires deep integration with Vue core. A pure 3rd-party solution can solve the problem equally well in most cases.
  2. There are great 3rd party ajax libraries that solve the same problem, are more actively improved/maintained, and designed to be universal/isomorphic (works in both Node and Browsers, which is important for Vue 2.0 with its server-side rendering usage).
  3. Given (1) and (2), it’s obvious that we are duplicating the effort and bringing in unnecessary maintenance burdens by keeping vue-resource’s current status. The time we spend on resolving vue-resource issues can be better spent improving other parts of the stack.

It might be a good idea to instead promote usage of something like isomorphic-fetch or got. I'd be happy to submit a pull request for either provided interest.

Also recommended from the blog post: Axios.

Issue installing post-css-loader

First of all: Awesome boilerplate 👍

Now to my problem:

I tried to install postcss-loader to autoprefix css with vendor prefixes.

Since I already installed sass-loader successfully, I would have expected postcss-loader to also work by just doing npm install postcss-loader autoprefixer --save-dev.

But sadly my css is not getting autoprefixed... Do I have to change something in .postcssrc.js?

Issue with npm run build

Hi,

Running npm run build gives the below error:

ERROR in static/js/app.ad81c56779b474d07f40.js from UglifyJs
Unexpected token punc «)», expected punc «(» [./src/bootstrap.js:27,2][static/js/app.ad81c56779b474d07f40.js:142,6]

The error is from UglifyJS plugin which doesn't support ES6 code yet (unless using the harmony branch, which is still in development)

Is this because the code is not getting transpiled to ES5 correctly?

Opening the production version in IE11 gives the same error in console and the site doesn't load.

Please can you have a look?

Thanks in advance.

Autoprefixer issue on standalone scss files

below is my app.scss which I am importing in bootstrap.js.

@import "color";
@import "variable";
@import "breakpoints";
@import "mixin";
@import "common";
@import "ComingSoon/comingsoon";
@import "Home/home";
@import "NavBar/navbar";
@import "StickyHeader/stickyheader";
@import "HowItWorks/howitworks";
@import 'ProjectCard/projectcard';
@import "ContactUsCard/contactuscard";
@import "ContactUs/contactus";
@import "PromotionalSection/promotionalsection";
@import "OurPartners/ourpartners";
@import 'Internal/loginandforgot';
@import 'Customer/customerlogin';
@import 'Footer/footer';

and below is my build/utils.js

  var postcssLoader = {
    loader: 'postcss-loader',
    options: {
      plugin: require('autoprefixer'),
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }

  function generateLoaders(loader, loaderOptions) {
    var loaders = [cssLoader, postcssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

It is unable to auto prefix the css. And my flex is breaking in almost all browsers(which uses vendor prefix).

change path app to src in vueture-cli

Hy Pete, thanks to make awesome boilerplate. i want to ask something..
how to change the folder base in vueture-cli (https://github.com/vueture/vueture-cli). when i start to write :

vueture make:layout Base

the component built inside src/app folder instead of src folder like your boilerplate has. Thanks.

-src
  -app
    -layouts
      --Base.vue
  ...
  -layouts
    --Default.vue

Webpack doesn't watch for stylus changes

I have set of *.styl files that are imported into app.styl. When I change something in the app.styl, Webpack reflects that change in a browser instantly, but Webpack ignores changes in those Stylus files until I edit app.styl or rerun 'npm run dev'. How to make it watch all the stylus files?

Set history mode on router

Hi all,

thank you @petervmeijgaard for this package.

Hi try to enable history mode on bootstrap.js like this :

export const router = new VueRouter({
  mode: 'history',
  routes: [routes],
});

no error on webpack, but on browser console i got this error

[vue-router] "path" is required in a route configuration

I try to set root parameter on VueRouter constructor but error remain.

Thank you very much!

npm WARN deprecated (babel)

When launching npm i, I have the following warning message:

npm WARN deprecated [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

Thanks

how to run npm with watch and hot reload?

sorry if this doesn't belong here but i thought it'd save me some time if you could just mention how to run the dev build with watch and hotreload enabled? I see you're already loading those middlewares I just don't know how to use it

thanks alot

Question about eventBus

hi sir.. i have this trouble about component communication, What would be the best approach for this should i use a global EventBus or make an entry to store for the UI components ?
thanks

Structuring the files

Hi, thanks for the great boilerplate! Question: I just started with Vue.js and I'm wondering why you're creating a new directory 'App' inside the src-directory and import the whole directory in main.js: (import * as App from './app';). I don't see a lot of other boilerplates doing the same. Is there a reason you separate main.js, bootstrap.js and /assets/ from other app files?

Why don't you place the <router-view> from Index.vue inside index.html and insert store and router inside the 'new Vue()' statement and keep everything inside the src directory?

How does proxies work?

I'm starting with Vuejs, and after some time reviewing the framework, I wanted to start with a template, this seems excellent for keeping my first project well structured and at the same time understanding the framework.

I have a question with the proxies. I am implementing them, but using your reference code I get the following error with the login:

Uncaught ReferenceError: payload is not defined

This is my code in src/store/modules/auth/actions.js

import Vue from 'vue';
import Proxy from '@/proxies/AuthProxy';
import store from '@/store';
import * as types from './mutation-types';
...
export const login = ({ commit }) => {
    new Proxy()
    .login(payload)
    .then((response) => {
        commit(types.LOGIN, response);
        store.dispatch('account/find');
        Vue.router.push({
            name: 'home.index',
        });
    })
    .catch(() => {
        console.log('Request failed...');
    });
}
...

As I understand it, in src/pages/login/Index.vue in the login method, the user object is sent to the auth/login action, so this object should arrive as a parameter until actions.js / login.

What is it missing? The query may be is basic, but I do not see how to go about learning this framework.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.