evanagee / vuejs-wordpress-theme-starter Goto Github PK

Hi Evan,

I'm trying to display single post, I've created a SinglePost.vue, add object into /router/index.js

{
    // How to dynamic detect the path?
    path: '/:slug',
    component: SinglePost
}

Right now I'm cheating, he he, change the permalink into "postname" only, to make it easy.

My question is, in WP we have many ways to display the path, from date /2017/10/18/hello-world, to category like /cagegory/hello-world, how could we get it and put it into the path programmatically?

Thanks.

Curious if you had any thoughts about replacing Bootstrap with Vuetify. I may be pursuing that path, and was looking at your project to gleen some Vue + WP insight.

Hey, I'm trying to replace js with ts, but there are no terminal errors and I get a blank page.

What I made:

1. npm install typescript ts-loader --save-dev

ts-loader version - 3.5.0

2. changed name from "app.js" to "app.ts"

• in functions.php
• in webpack.mix.js

3. in "webpack.mix.js" added

    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: "ts-loader",
          options: { appendTsSuffixTo: [/\.vue$/] },
          exclude: /node_modules/
        }
      ]
    },
    entry: {
      app: "./src/app.ts"
    },
    resolve: {
      extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
    }
  })

4. added tsconfig.json file to main folder

  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

5. added vue-shim.d.ts file to main folder

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

app.ts and App.vue

import Vue from "vue";

import App from "./App.vue";

new Vue({
  el: "#app",
  render: h => h(App)
});

<template lang="html">
  <div class="">
    asdasdds
  </div>
</template>

<script lang="ts">
export default {
}
</script>

<style lang="css">
</style>

Can you maybe help with this issue?

Just noticing this but it seems like when files are changed witin the VueJS source code the project isn't recompiling. I keep saving and don't see the terminal re-run webpack processes or anything. Also having issues seeing changes on the theme once its activated as a theme on a wordpress install. Is their something i'm missing?

Hi there,

While the page loads nicely in e.g. Opera and Safari, it looks really bad in Firefox for the first second (on a slower connection) while the page is loading.

Also, the Youtube video container has a scrollbar, which looks strange, especially just before the video has been setup. Interestingly enough this is not the case with active RDM.

Hi there,

Is is compatible with the ACF plugins?

Sorry for assuringly stupid question but is there any chance this setup allows for a functioning preview button? Or any planned workarounds/integrations?

Thanks!

i understand that in router/index.js you can link a wp page by id to a vue component, i have 2 routes set up like this -

  {
      path: '/',
      name: 'Home',
      component: Home,
      // props: { pageContentID: 383 }
  },
  {
      path: '/about',
      name: 'About',
      component: About,
      props: { pageContentID: 16 }
  }

and my-url.local/about works fine

however when a wordpress administrator is adding new pages there is no fallback templates, in regular wordpress those would be page.php, post.php etc.

how can I add these fallback view templates or are they already there and I haven't found them yet?

In my build I'm getting the following TypeError error: "t.all.filter is not a function"

I got this error below when I try 'npm run production'.

Is it any possibility to run your theme on the local server?
As others mentioned, no page content is loaded.

ValidationError: UglifyJs Plugin Invalid Options

options should be object

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

@EvanAgee Thanks for the great starter theme! Would you be able to provide some documentation on how to setup different page templates for specific pages?

Hi guys,

So I've downloaded fresh copy of this theme, started as Mr. Readme said, and I ran into this error doing

npm run watch

Installation went well exept for two warnings:

npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha1-+PLIh60Qv2f2NPAFtph/7TF5qsg= integrity checksum failed when using sha1: wanted sha1-+PLIh60Qv2f2NPAFtph/7TF5qsg= but got sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==. (2301 bytes)

npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.

Entire error looks like this:

> @ watch /var/www/vhosts/mysite.local/wordpress/wp-content/themes/mysite
> node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

/var/www/vhosts/mysite.local/wordpress/wp-content/themes/mysite/node_modules/laravel-mix/setup/webpack.config.js:24
let WebpackConfig = require('../src/builder/WebpackConfig');
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported 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 Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at requireConfig (/var/www/vhosts/mysite.local/wordpress/wp-content/themes/mysite/node_modules/webpack/bin/convert-argv.js:97:18)
    at /var/www/vhosts/mysite.local/wordpress/wp-content/themes/mysite/node_modules/webpack/bin/convert-argv.js:104:17
    at Array.forEach (native)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2018-02-18T13_33_30_936Z-debug.log

.log file says prints the same.

Steps do reproduce this issue:

having ubuntu 14.04
npm 5.6.0
download zip, unpack & run.

Anyone else had this problem?

Hi !
Thanks for great starter theme!
I'm wondering how can i use browsersync there? I found that laravel-mix support it but I can't make it work...

Hi,

This looks great! Can't wait to try it out. Just wondering about SEO though. If we installed Yoast SEO for instance would this be enough as I assume the meta tags it adds to the head would still work as normal if every URL loads the index.php?

This is great work, I love the idea so much. But I'm so new to Vue and also Vuex, could you please have more detail about it in documentation?

Thanks in advance.

Is there a demo available to experience the look and feel?

Hi,
I am building a custom theme in wordpress php and I would like to incorporate some vue components in it. I would like to keep wordpress' functionnality (login, register, custom post-types etc.) and its core php functions.

Is it possible to use Vue in some sections of some pages only, including the scripts in a php file and make vue run it instead of index.html (default in vue-cli) for example?

Thanks a lot :)

Hi! for the menus via WP-API, we can use WP Rest API Menus, but we have a problem. The endpoint don'ts /wp-json/wp/v2/, is /menus/v1/menus.

Possible solution: In the app.js file, change the API_BASE_PATH for only /wp-json, instead of: /wp-json/wp/v2/.

done that, we created a module to get the menu with vuex. 😄

I'm using it that way, but with NuxtJS. Can I make a pull request?

https://carbonfields.net

It's awesome library you can easily add custom fields as gallery, nested list, widget, gutenberg block, etc.
Basically you add something in function.php then pass a variable into any wordpress page template.... but how do you store php variables into vue.js data?

In that case it's a php code carbon_get_theme_option( 'crb_myName_field' );

Interested in joining the Vue Wordpress Slack community?

I'm running npm run watch but I can't find where is the application running.
I tried localhost:8080 without success...
A laravel mix notification pops up but I don't know on which port the site it running.
Laravel is new to me and it looks a bit confusing....

Hi!
Thank You for your work.
Help solve the problem.
I run 'npm run production' and get the error

Uncaught TypeError: Cannot read property 'call' of undefined
at webpack_require (manifest.js:55)
at Object.eslX (app.js:6)
at webpack_require (manifest.js:55)
at Object.0 (app.js:1)
at webpack_require (manifest.js:55)
at webpackJsonpCallback (manifest.js:26)
at app.js:1

in manifest.js:
// Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, webpack_require);

How I can fix it?

before mixing all the assets i used to put all images under src/assets/images/, after mixing all the images copied to dist/assets/, but wordpress theme could't get this image from its url i.e <img data-v-10e39ae0 src="/images/homelayer1-min.png?29a6a2fd8dadbdd1e9cd6b82fe8f22d5">.

the url should be <img data-v-10e39ae0 src="dist/assets/images/homelayer1-min.png?29a6a2fd8dadbdd1e9cd6b82fe8f22d5">

now how to resolve this image url problem?

vue => 2.5.17
vue-template-compiler => 2.5.17

After upgrading, I'm getting a bunch of errors. This is one of them:

[Bootstrap-Vue warn]: b-nav: Prop 'is-nav-bar' is deprecated. Please use component '<b-navbar-nav>' instead.

Did a fresh install and got this error:

Vue packages version mismatch:

• [email protected]
• [email protected]

package.json defines "firebase": "^4.13.1",
Current version of firebase is 5.6.0

installing with the old version on node v10.14.1 causes issues with the gRCP library.

Hi Evan,

I'm having trouble getting your theme up and running. I installed Wordpress on a local (MAMP) server and simply copied the theme files to my theme directory and took things from there. Following the quickstart video and the readme file I tried running npm install inside the theme directory. This in turn just gave me a bunch of errors right off the bat. What could I be doing wrong?

I cannot access with http://localhost:8080/.

Hey,

So ive just downloaded the latest WP (4.9.5) and installed your theme, ran NPM install and npm run production.

Theme is working however i get 404 on all the api requests to wp-json/wp/v2/

I then changed it to ?rest_route=/wp/v2/ in app.js ( If i put that into the browser it returns JSON )

Unfortunately im still getting the same issue.

Am i missing something or is this due to a later version of WP?

Thanks

Hi @EvanAgee, great job ;-) I did not use it starter yet, but I see potential problem with cache busting.

https://github.com/EvanAgee/vuejs-wordpress-theme-starter/blob/master/functions.php

    wp_enqueue_script('blankslate/app.js', get_template_directory_uri() . '/dist/scripts/app.js', null, null, true);

I see you attach file without any specific version. What in case when you rebuild some js/css files ? How did you resolve it ?

Hi @EvanAgee, first, thank you for the work! So far I've made it to good use but I'm wondering about how to handle assets, namely static images that sit in the dist folder.

I do have a solution which works, which is making a global variable to the directory and use it for static images in my template like so:

Vue.prototype.$ASSET_DIR = "/wp-content/themes/theme-name/dist";

and in my template
<img :src=" $ASSET_DIR + '/img/logo.svg'">

However, there must be a better way? Is there an asset handling provided by webpack that I'm missing here?

Hi there,

I've got this theme installed and so far, most things are making sense. What I can't figure out is how to use the bundled API method getPage() to pass the content to the component. I'd love to see a full example of how this is accomplished. So far, what I've been trying are different combinations of this (screenshot):

https://cloudup.com/cokkIKOWUlk

Any help would be very much appreciated.

Just want to ask if bootstrap is a must dependency? Can it be removed from starter theme? Thank you!
Great work and I really appreciate the effort. Keep up the awesome work...

Hi,
I'm trying to use your theme starter but i'm confronted to this error:

• state.all.filter is not a function
  
  Could you help me ?

Great theme! Just wondering how to extract Bootstrap from the them as I would like to handle the styling myself. Thanks!

On OSX, I have loaded the starter into a MAMP [v4.2.1 (852)] instance. I have run 'npm run watch' and also 'npm run production'. In both cases, the 'header' and 'footer' render, but the body does not. Suggestions? I have fixed a minor issue with the API route (I was getting 404 errors, but I fixed this with a small edit to the app.js (I removed the leading '/'). Calling the api directly from the browser URL works fine (in my case it is 'http://localhost:8888/development-vue/wp-json/wp/v2/categories?sort=name&hide_empty=true&per_page=50').

hello,

i got this error on my console, from fresh install,
Error from RecentPostsWidget..

[Vue warn]: Error in render: "TypeError: Cannot read property 'rendered' of undefined"
found in
---> <RecentPostsWidget> at src/components/widgets/RecentPosts.vue
       <Home> at src/components/Home.vue
         <App> at src/App.vue
           <Root>

any solution?

Thanks.

How do i import icons like font awesome icons for use with this theme?

Hello,

Can you tell me how my SEO will be affected if I use this starter pack ?

window.WordPress.csrfToken ?!
window.WordPress is undefined

Hi Evan,
first of all thanks for the good work!

I am new to vue so I got a little issue when I try serving the application from a subdirectory.
The home url is http://localhost/projects/fabiangeierblog/.

The header and footer are shown but inside <router-view></router-view> Home.vue is not displayed.

This is my .htaccess File in C:\xampp\htdocs\projects\fabiangeierblog:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /projects/fabiangeierblog/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /projects/fabiangeierblog/index.php [L]
</IfModule>
# END WordPress

And this is my approach solving the problem in the router/index.js (C:\xampp\htdocs\projects\fabiangeierblog\wp-content\themes\fabiangeierblog)

import Vue from 'vue'
import Router from 'vue-router'

// Components
import Home from '../components/Home'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      // props: { pageContentID: 383 }
    }
  ],
  base: "/projects/fabiangeierblog/",
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

export default router

Thanks for the help and the good work you are doing.

Fabian

I've made quite a few updates to the project that should fix many of the issues you all have been experiencing. Some highlights include:

• Project is updated to work on latest stable version of node and npm.
• Removed Laravel mix.
• Removed jQuery
• Removed Bootstrap Vue
• npm cleanup/updates

Please note that the paths of the JS and CSS have changed so you may need to update your project.

2019-02-05

Added

• Support for postcss
• New css style examples
• Cache busters for js and css

Changed

• Updated outdated npm packages
• Recent post and Page widgets to use router-link
• Removed Laravel Mix and replaced with standard webpack config

Removed

• Example Firebase integration
• jQuery
• Several unused npm dependencies
• Bootstrap / Bootstrap Vue
• Several variables that were stored on the window object
• Support for sass styling (switched to postcss)

Using Vuejs for replace this http://michaelsoriano.com/wordpress-widget-custom-post-types/

@EvanAgee Any way of sorting out this issue temporally till Bootstrap Vue beta.10 is out?

Think it might be messing with the <router-view></router-view> as nothing is showing.

Bootstrap-Vue Issue #1201

Thanks

Code splitting minimizes bundle size, so I wanted it for my project. This is how I did it:

in router/index.js:

// import Page from '../components/Page/Page.vue'
const Page = () => import('../components/Page/Page.vue')

in webpack.mix.js:

mix.webpackConfig({
  output: {
    publicPath: 'vuejs-wordpress-theme-starter/dist/',
    chunkFilename: 'scripts/[name].[chunkhash].js',
  },
});

and in the <head> of index.php:

<base href="<?php bloginfo( 'stylesheet_directory' ); ?>" />

Not sure if lazy-loading is 'best practice' for everyone, so putting it here instead of a pr. Perhaps its useful for someone or can be improved.

Hi there, i'm trying to add assets (images and videos) directly form the theme but can't find a way to make it work. I tried several things, and feel a bit dumb, but I can't make it work and can't add a single image into theme ! So what is the best and proper way to do it ? (like the image already included in your theme)

Hi
How can I create contact us form with rest API?

I could use a hint to get this theme working with WordPress.

• Brand new WordPress setup with no other plugin/themes.
• Downloaded and extracted vuejs-wordpress-theme-starter Theme in wp-content\themes folder
  -- npm install and npm run production.
  -- Activated the theme in wp-admin

I see header menu 'Link and Disabled' and footer 'This is the footer'.
However, I do not see the page content.

Not sure why I do not see page content. Wordpress is installed in a subdirectory so my wordpress url is http://localhost:8888/mywebsitefoldername

I tried to change API_BASE_PATH to point to /mywebsitefoldername/wp-json/wp/v2/

In Chrome Developer Console, I see http://localhost:8888/mywebsitefoldername/wp-json/wp/v2/pages?per_page=10 returns 200 with data.

i'm using onesignal to push web notifications so how could i achieve that via vuejs as frontend i have looking over the web for web push api i have found this https://codecanyon.net/item/desktop-mobile-push-notification-system-wordpress-plugin/6548533 but to make it works i have to get this plugin first https://codecanyon.net/item/smio-wordpress-api-complete-solution/6448487 so are those plugins will works fine with wordpress and vuejs as frontend or do u suggest a solutions

Hey Evan,

This is a great project, exactly what I've been searching for!

Have you considered creating a repo that's compatible with Vue-cli? It would make it a cinch to bootstrap new projects using this starter theme.