Vue component not showing

Question

I followed the series codetube "youtube clone" and I did everything like the Alex but the Vue component not working. I am not working on localhost but on server. I would be very glad for any suggestions.

My app.js

require('./bootstrap');



Vue.component('videoup', require('./components/VideoUpload.vue'));


const app = new Vue({
  el: '#app'
});

My VideoUpload.vue file:

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Upload</div>

                    <div class="panel-body">
                    ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

My blade file:

@extends('layouts.app')

@section('content')
    <videoup></videoup> 

@endsection

My app.blade file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
<!--    <link href="/css/app.css" rel="stylesheet">-->

    <link rel="stylesheet" href="/css/app.css">


    <!-- Scripts -->
    <script>
        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
    </script>
</head>
<body>
    <div id="app">

        @include('layouts.partials._navigation')

        @yield('content')



    </div>



    <script src="/js/app.js"></script>
</body>
</html>

My gulfpile.js:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

require('laravel-elixir-webpack-official');





elixir((mix) => {
    mix.sass('app.scss')
            .webpack('app.js');
});

My webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
};

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map',
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
};

Do you have any errors in your console? My initial thoughts are that you have not defined a render function as require('vue') pulls in the runtime-only build, which does not include the template compiler. — craig_h
– craig_h, Commented Feb 10, 2017 at 19:17
No I dont have any errors, when I reload page everything works without error but I dont see Vue component template on the page....I also tried require('vue') but nothing happend — Peter
– Peter, Commented Feb 11, 2017 at 13:18

craig_h · Accepted Answer · 2017-02-13 13:31:07Z

6

It's difficult to debug your setup because I have no idea what tutorial you followed, how you are bundling your code (webpack or browserify) or what build tools you are using (gulp, elixir etc), but I think the most important thing is to understand how Vue works, and then you will be able to better understand how to solve this yourself.

Firstly, vue has two builds - a standalone build and a runtime-only build. The difference between these is that the standalone build includes a template compiler and the runtime-only build does not.

Render Functions

Vue compiles templates in to render functions to work (which are just javascript functions), it doesn't use HTML at all, so if you haven't written a render function or you haven't pre-compiled your components (using .vue files and a bundler like browserify or webpack) then you must use the standalone build; and this includes the base component itself, so the important thing to know is:

If you are trying to use a component inside anything other than a .vue file you need to use the standalone build.

because you need the compiler to turn the HTML into a render function.

So, looking at your code, you are trying to use your component inside a .blade.php file, which isn't a single file component so you will need the standalone build in your project.

When using npm, vue imports the runtime-only build by default:

// ES6
import `Vue` from `vue` // this imports the runtime-only build

// ES5
var Vue = require('vue'); // this requires the runtime-only build

But you need to make sure you are using the standalone build, and how you do this depends on whether you use webpack or browserify. If you are using webpack, you need to add the following to your webpack config:

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

If you are using browserify you will need to add the following to your package.json:

"browser": {
  "vue": "vue/dist/vue.common"
},

And also make sure that resources/assets/views/layouts/app.blade.php wraps everything in a div with the id app:

...
<body>
<div id="app">
   ...
</div>
</body>
...

Update

Based on your webpack config it looks like your issue is here:

  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },

This says you are compiling main.js in the src folder and outputting it to the dist folder as build.js.

Laravel uses a different structure, so you will need to change this to:

  entry: './resources/assets/js/app.js',
  output: {
    path: path.resolve(__dirname, './public/js'),
    publicPath: '/public/',
    filename: 'app.js'
  },

This now says, compile resources/assets/js/app.js and output the file to public/js/app.js. I don't use webpack myself so that may need a little tweaking, but that should get your project up and running.

edited Feb 13, 2017 at 13:31

answered Feb 12, 2017 at 13:58

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Peter Over a year ago

Thank for your reply. Sorry that I didnt write all required informations but I am very new to Vue. I have added code from gulpfile.js and webpack.config.js to my question som you can chek it. I have checked my file and everything looks ok I have resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' } } in webpack.config and also everything in app.blade.php is wrapped in <div> with id app so I cannot find the source of my problem. I would be verz glad for any suggestions

Peter Over a year ago

Or let me know which informations you need and I will post it...Thanks in advance

Peter Over a year ago

@craig_h.....Thanks for all your effort. I tried it but nothing changed.....Very frustrating

Tjip Kloosterman · Accepted Answer · 2019-04-23 11:40:04Z

1

I had the same issue. the following solved it for me..

I changed:

require('./components/mycomponent.vue')

to:

import MyComponent from "./components/mycomponent.vue";

answered Apr 23, 2019 at 11:40

Tjip Kloosterman

1011 silver badge1 bronze badge

Collectives™ on Stack Overflow

Vue component not showing

2 Answers 2

Render Functions

If you are trying to use a component inside anything other than a `.vue` file you need to use the standalone build.

Update

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Render Functions

If you are trying to use a component inside anything other than a .vue file you need to use the standalone build.

Update

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

If you are trying to use a component inside anything other than a `.vue` file you need to use the standalone build.