Skip to content

Instantly share code, notes, and snippets.

View oshosanya's full-sized avatar

Oshosanya Michael oshosanya

View GitHub Profile
{% extends 'base.html' %}
{% block body %}
<example-component></example-component>
{% endblock %}
<!DOCTYPE html>
<html>
<head>
<title>Django vue</title>
</head>
<body>
<div id="app">
{% block body %}
{% endblock %}
</div>
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
* * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'assets/js/vue-app.js')
.sass('resources/sass/app.scss', 'assets/css/vue-app.css');
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
@oshosanya
oshosanya / ExampleComponent.vue
Created April 3, 2020 14:54
Integrate vuejs into existing django app
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
@oshosanya
oshosanya / rxjs-ts
Created November 26, 2019 14:54
Example of using rxjs with typescript
interface IObserver {
next(any);
complete();
}
interface IObservable {
subscribe(IObserver);
}
class WeatherStation implements IObservable {